Question

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

我能够在调整我找到this的代码之后创建here，并且能够使我的JSON数据工作，但是无法将点或笔划合并到我的版本。

我试图制作一个＆＃34; dot＆＃34;变量与＆＃34; line＆＃34;相同。变量：

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);

但是我的代码中出现了访问各个数据数组的问题。

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

  <!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>

Answer 1

将你的图形分成你想要的3个东西，一个填充区域，一条顶部的线条（不同的不透明度），然后是一组圆圈。这是一些评论和可运行的代码：

＆＃13;

"The trusted leader"
"The champions event was bested"
"Another day, another dollar"
"The player will succeed if he's well rested"
"Go on to the next event"

＆＃13;

在D3.js图表中添加点

1 个答案:

在D3.js图表​​中添加点

1 个答案:

在D3.js图表中添加点