在D3.js图形中添加点

Question

在D3.js图形中添加点

我是D3的新手，需要创建两个数据集的图形。

在修改了我在此处找到的代码之后，我能够创建此代码，并且能够使我的JSON数据正常工作，但是无法将点或笔画合并到我的版本中。

我试图以与“ lines”变量相同的方式制作一个“ dots”变量：

var dots = canvas.selectAll(".dot")
     .data(dataArray, function(d){ return line(d.values);})
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);

Run Code Online (Sandbox Code Playgroud)

但是在我的代码中似乎遇到了访问单个数据数组的问题。

感谢您的帮助，我的整个代码如下：

  <!DOCTYPE html>
  <html>
  <head>
  <style>
      body {
        font: 10px sans-serif;
      }

      .axis path, .axis line {
        fill: none;

        shape-rendering: crispEdges;
      }

      .line {

      }

      .area {
        fill: steelblue;
        opacity: 0.5;
      }


      .dot {
        fill: steelblue;
        stroke: steelblue;
        stroke-width: 1.5px;
      }
  </style>  
  </head>
  <body>
  <div id="disp"></div>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script>

         var dataArray = [
          {
          category: 'red',
          values: [0, 4, 9, 4, 4, 7]
          },

         {
          category: 'blue',
          values: [0, 10, 7, 1, 1, 11]
         }
      ];

      var canvas = d3.select('#disp')
      .append('svg')
      .attr('width', 400)
      .attr('height', 200);

      var x = d3.scale.linear()
              .domain([0, 8]) 
              .range([0, 700]);

      var y = d3.scale.linear()
              .domain([0, 20])
              .range([200, 0]);  

      var line = d3.svg.line()
          .interpolate("cardinal")
          .x(function(d, i) { return x(i); })
          .y(function(d, i) { return y(d); });

      var area = d3.svg.area()
      .interpolate("cardinal")
      .x(line.x())
      .y1(line.y())
      .y0(y(0));

      var lines = canvas.selectAll('.line')
          .data( dataArray, function(d) {  return d.category; } );  

          lines.enter()
          .append('path')
          .attr('class', 'line')
          .attr("d", function(d) { return line(d.values);})
          .style("stroke", function(d) {return d.category;})
          .attr("class", "area")
          .style("fill",  function(d) {return d.category;})
          .attr("d", function(d) { return area(d.values);});

  </script>
  </body>
  </html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*ark 5

将您的图表分成3个所需的部分：一个填充区域，一个顶部的线（具有不同的不透明度）和一组圆形。这是一些已注释且可运行的代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      shape-rendering: crispEdges;
    }
    
    .line {
      fill: none;
      stroke-width: 3px;
      
    }
    
    .area {
      fill: steelblue;
      opacity: 0.5;
    }
    
    .dot {
      fill: steelblue;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
  </style>
</head>

<body>
  <div id="disp"></div>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var dataArray = [{
        category: 'red',
        values: [0, 4, 9, 4, 4, 7]
      },

      {
        category: 'blue',
        values: [0, 10, 7, 1, 1, 11]
      }
    ];

    var canvas = d3.select('#disp')
      .append('svg')
      .attr('width', 400)
      .attr('height', 200);

    var x = d3.scale.linear()
      .domain([0, 8])
      .range([0, 700]);

    var y = d3.scale.linear()
      .domain([0, 20])
      .range([200, 0]);

    var line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d, i) {
        return x(i);
      })
      .y(function(d, i) {
        return y(d);
      });

    var area = d3.svg.area()
      .interpolate("cardinal")
      .x(line.x())
      .y1(line.y())
      .y0(y(0));

    var lines = canvas.selectAll('.category')
      .data(dataArray, function(d) {
        return d.category;
      });

    // on enter append a g to hold our 3 parts
    var lE = lines.enter()
      .append('g')
      .attr('class', 'category')
    
    // append a path that's our solid line on top of the area
    lE.append("path")
      .attr('class', 'line')
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d) {
        return d.category;
      })
      
    //apend a path that's our filled area
    lE.append("path")
      .attr("class", "area")
      .style("fill", function(d) {
        return d.category;
      })
      .attr("d", function(d) {
        return area(d.values);
      });
    
    // create a subselection for our "dots"
    // and on enter append a bunch of circles
    lE.selectAll(".dot")
      .data(function(d){
        return d.values
      })
      .enter()
      .append("circle")
      .attr("r", 3)
      .attr("cx", function(d,i){
        return x(i);
      })
      .attr("cy", function(d){
        return y(d);
      })
      .attr("fill", function(d){
        return d3.select(this.parentNode).datum().category;
      });

  </script>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	5043 次
最近记录：	9 年，4 月前