在此之前，我們學(xué)習(xí)了柱狀圖和餅圖的制作，了解了比例尺，坐標(biāo)軸的建立，學(xué)會(huì)了數(shù)據(jù)綁定和一些自定義交互事件。這一節(jié)，我們將使用d3模仿echart的氣泡圖，學(xué)習(xí)散點(diǎn)圖的制作，并復(fù)習(xí)鞏固一下之前的知識(shí)。

這一節(jié)用到的知識(shí)點(diǎn)比較多，但是難度不高，我們直接進(jìn)行圖形繪制，用到時(shí)再詳細(xì)講解。

準(zhǔn)備的數(shù)據(jù)

const circle_data =[
      {
        apple: [
                [0.5, 0.5],
                [1.6, 0.6],
                [1.2, 1.7],
                [1.5, 1.8],
                [1.9, 0.6],
                [1.4, 2],
                [2, 2.5],
                [2.1, 2]
              ]
    } ,
    {
      banana: [
                [1.1, 2.3],
                [1.8, 1.8],
                [1.1, 2],
                [1.3, 4],
                [1.7, 0.8],
                [1.2, 4.3],
                [2.5, 2.5],
                [3.5, 3.5],
                [5, 5]
    ]
  }
]

構(gòu)建坐標(biāo)軸

由于x軸的數(shù)據(jù)和y軸的數(shù)據(jù)都是數(shù)值型，存在一定的連續(xù)性，因此x軸和y軸都采用線性比例尺。注意，x,y軸可以 任意值 為起始點(diǎn)

    const data = circle_data
    var initWidth = 340
    var initHeight = 500

    var padding = { left:40, top:20, right:20, bottom: 20}

    var height = initWidth - padding.top - padding.bottom
    var width  = initHeight - padding.left - padding.right


    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .style("padding-left", padding.left)
                .style("padding-right", padding.right)
                .style("padding-top", padding.top)
                .style("padding-bottom", padding.bottom)


     //添加y軸坐標(biāo)軸

        //y軸比例尺
        let nums =[]  //把y軸方向的數(shù)據(jù)放在一個(gè)數(shù)組內(nèi)，取最大最小值確定y軸比例
        data.forEach((e, i) => {
            for(var v in e){
               nums = [...nums, ...e[v]]
             }
        })
        let ydata = nums.map(function(e, i){ return e[1]})
        let yScale = d3.scaleLinear()
         .domain([d3.min(ydata), d3.max(ydata)])
         .range([height , 0]);

         let _yScale = d3.scaleLinear()
         .domain([d3.min(ydata), d3.max(ydata)])
         .range([0, height]);

        //定義y軸
        let yAxis = d3.axisLeft(yScale);

        //添加y軸
        svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + 0 + "," + 0 + ")")
        .call(yAxis);

     //添加x軸坐標(biāo)軸

         //x軸比例尺
         let xData = nums.map(function(e, i){ return e[0]})
         let xScale = d3.scaleLinear()
                       .domain([d3.min(xData), d3.max(xData)])
                       .range([0, width]);

        //定義x軸
        let xAxis = d3.axisBottom(xScale)

        //添加x軸
         svg.append("g")
            .attr("class","axis--x")
            .attr("transform","translate(" + "0 ," + height + ")")
            .call(xAxis);

建立坐標(biāo)軸

添加網(wǎng)格

為圖表插入網(wǎng)格線很簡(jiǎn)單，就是生成兩個(gè)標(biāo)記尺寸為背景大小的axis組件，然后和橫縱軸重疊就可以了

          // 定義橫軸網(wǎng)格線
          function make_x_gridlines() {
              return d3.axisBottom(xScale)
                  .ticks(10)   //設(shè)定坐標(biāo)軸的分隔數(shù)，默認(rèn)是10
          }

          // 定義縱軸網(wǎng)格線
          function make_y_gridlines() {
              return d3.axisLeft(yScale)
                  .ticks(10) 
          }

        // 添加橫軸網(wǎng)格線、
        svg.append("g")
            .attr("class", "grid")
            .attr("transform", "translate(0," + height + ")")
            .call(make_x_gridlines()
                .tickSize(-height) //設(shè)定坐標(biāo)軸內(nèi)外刻度的長(zhǎng)度。默認(rèn)是6
                .tickFormat("") //讓所有的tick都沒(méi)有標(biāo)注
            )

        // 添加縱軸網(wǎng)格線
        svg.append("g")
            .attr("class", "grid")
            .call(make_y_gridlines()
                .tickSize(-width) 
                .tickFormat("")  
            )

grid

添加點(diǎn)

下面介紹一下svg 的基本元素circle, 它的位置屬性包括：

• cx 圓心在x軸上的坐標(biāo)
• cy 圓心在y軸上的坐標(biāo)
• r 圓的半徑

為了使svg的dom結(jié)構(gòu)更加清晰和更易操作，可以新建g層（包裹層），把不同的類型的circle放在各自的g層內(nèi)，例如此例中，新建的ｇ層class 分別設(shè)置成了“apple" "banana", 內(nèi)部的circle的class分別設(shè)置成了”circle_apple" "circle_banana",這樣在后期對(duì)svg元素的操作將更加便捷

    var colors = ['rgba(245,0,87,0.75)',' rgba(63,81,181,0.75)']

      //添加circle包裹層，有幾種類型添加幾個(gè)
        var cover = svg.append("g")
                        .selectAll("g")
                        .data(data)
                        .enter()
                        .append("g")
                        .attr("class", function(d, i){
                            for(var v in d) return v
                        })

        //添加circle
        cover.selectAll("circle")
              .data(function(d){
                for(var v in d) return d[v]
              })
              .enter()
              .append("circle")
              .attr("cx", function(d){
                 return xScale(d[0])
                })
              .attr("cy", function(d){
                 return height - _yScale(d[1])
               })
              .attr("r", function(){
                let t = Math.random()*20
                return t > 8 ? t : t + 8
              })
              .attr("class", function(){
                return "circle_" + d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
              })
              .attr("fill", function(){
                let t = d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
                data.forEach(function(e, i){
                  for(let v in e)  v === t ? t = i : ""
                })
                return colors[t]
              })

添加點(diǎn)

給點(diǎn)添加一些交互事件

給氣泡添加移入移除事件，動(dòng)態(tài)改變其半徑，增加收縮動(dòng)畫

對(duì)于移入移出時(shí)，每個(gè)圓點(diǎn)上部都添加了其所屬類別的提示文字，這里我們采用了一種比較取巧 的方法，即全局添加一個(gè)text元素，在鼠標(biāo)移入到circle時(shí)，動(dòng)態(tài)改變其位置和內(nèi)容

//添加每個(gè)原點(diǎn)上部的提示文字
        let showtext = svg.append("text")
                          .text("")
                          .attr("font-size", '14px')


` covers.selectAll("circle")
              .....      //接上
                .attr("fill", function(){
                let t = d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
                data.forEach(function(e, i){
                  for(let v in e)  v === t ? t = i : ""
                })
                return colors[t]
              })
              .on("mouseover",function(d){
                  let self = this;
                  d3.select(this)
                      .transition()
                      .duration(200)
                      .attr("r", d3.select(this).attr("r") * 1.6)
                  showtext.attr("x", function(){
                    return xScale(d[0])
                  })
                  .attr("y",function(){
                    return height - _yScale(d[1]) - d3.select(self).attr("r") * 1.6
                  })
                  .text(function(){
                    return String(d3.select(self).attr("class").split("_")[1])
                  })
                  .attr("text-anchor","middle")
                  .attr("fill", function(){
                      let t = d3.select(d3.select(self)._groups[0][0].parentNode).attr("class")
                      data.forEach(function(e, i){
                        for(let v in e)  v === t ? t = i : ""
                      })
                      return colors[t]
                  })
              })
              .on("mouseout",function(){
                d3.select(this)
                  .transition()
                  .duration(200)
                  .attr("r", d3.select(this).attr("r") / 1.6)

                showtext.text("")
              })

mouse

添加左側(cè)提示欄顏色塊及交互事件

新添加包裹層g, 左側(cè)提示欄內(nèi)容都放在g層中，這里命名為detail

由于在上面給不用類型的circle添加了不同的class,因此在鼠標(biāo)移入移出顏色塊的時(shí)候，可以很容易通過(guò)class操作相應(yīng)的circle元素

          //添加左側(cè)提示部分包裹層
            let detail =  cover.append("g")

            //提示部分顏色塊
            let rect   =  detail.append("rect")
                                .attr("width", 10)
                                .attr("height", 10)
                                .attr("fill", function(d, i){
                                  let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
                                  data.forEach(function(e, i){
                                    for(let v in e)  v === t ? t = i : ""
                                  })
                                  return colors[t]
                                })
                                .attr("transform", function(d, i){
                                    return `translate(10, ${(i)*20})`
                                })
                                .on("mouseover", function(d){
                                    let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
                                    var circles = d3.selectAll('.circle_'+ t)
                                    circles._groups[0].forEach(function(e, i){
                                      d3.select(e)
                                          .transition()
                                          .duration(200)
                                          .attr("r", d3.select(e).attr("r") * 1.6 )
                                    })
                                })
                                .on("mouseout", function(d){
                                    let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
                                    var circles = d3.selectAll('.circle_'+ t)
                                    circles._groups[0].forEach(function(e, i){
                                      d3.select(e)
                                        .transition()
                                        .duration(200)
                                        .attr("r", d3.select(e).attr("r") / 1.6 )
                                    })
                                })

block

添加詳情欄文字

詳情欄文字直接位置由色塊決定，因此參考上方色塊定位，同時(shí)使用dx dy對(duì)文字的位置進(jìn)行微調(diào)

           // 提示部分文字
            let text  = detail.append("text")
                              .text(function(d, i){
                                for(let v in d)
                                  return v
                              })
                              .attr("transform", function(d, i){
                                  return `translate(25, ${(i)*20})`
                              })
                              .attr("font-size", '12px')
                              .attr("dy",function(){
                                return '0.8em'
                              })
                              .attr("fill", function(){
                                return '#666'
                              })

最終效果

最終效果

有時(shí)候我們可能需要框選一部分點(diǎn)的數(shù)據(jù)來(lái)進(jìn)行下一步操作，由于鼠標(biāo)框選事件在不單獨(dú)設(shè)置的時(shí)候會(huì)與鼠標(biāo)其他事件沖突，因此新建了一份文件，源碼在下部，有興趣的朋友可以看一下

框選事件