Question

我有一个使用d3.js的2行图表。这行来自不同的数据集，但两行的y轴范围相同。我正在显示两行的节点。第一行的节点显示正常。但是第二行的节点没有出现。任何人都可以告诉我这是什么问题？这是节点和行的代码。

var vis = d3.select('#visualisation'),
      WIDTH = 400,
      HEIGHT = 400,
      MARGINS = { top: 20, right: 20, bottom: 20, left: 50 },
      xRange = d3.scale.ordinal().rangeBands([MARGINS.left, WIDTH - MARGINS.right], 0.4).domain(barData.map(function (d) { return d.x; })),

      y1Range = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, d3.max(barData1, function (d) { return d.y1; })]),
      xAxis = d3.svg.axis().scale(xRange).tickSize(5);

      y1Axis = d3.svg.axis().scale(y1Range).tickSize(5).orient("right").tickSubdivide(true);


      /*Draw X Axis values*/
    vis.append('svg:g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + (HEIGHT-MARGINS.bottom) + ')')
      .call(xAxis);

       /*Draw Y1 Axis values*/
    vis.append('svg:g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + (HEIGHT - MARGINS.bottom) + ',0)')
      .call(y1Axis);

       /*Draw the First Line*/
    var lineFunc = d3.svg.line()
    .x(function (d) {
        return (xRange(d.x))+MARGINS.right;
    })
    .y(function (d) {
        return y1Range(d.y1);
    })
    .interpolate('linear');


  /*Animate the line*/
 var path1 = vis.append('svg:path')
      .attr("d", lineFunc(barData1))
      .attr("stroke", "#00CC66")
      .attr("stroke-width", 2)
      .attr("fill", "none");

 var totalLength = path1.node().getTotalLength();

 path1.attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(1000)
      .ease("linear")
      .attr("stroke-dashoffset", 0);

    /*Draw the circles*/
 var circles = vis.selectAll("circle").data(barData1);
 circles.enter()
        .insert("circle")
        .attr("cx", function (d) { return (xRange(d.x))+MARGINS.right; })
        .attr("cy", function (d) { return y1Range(d.y1); })
        .attr("r", 3)
        .style("fill", "#00CC66");

    /*Draw the Second Line*/
    var lineFunc1 = d3.svg.line()
    .x(function (d) {
         return (xRange(d.x))+MARGINS.right;
      })
    .y(function (d) {
         return y1Range(d.y2);
    })
     .interpolate('linear');

    var path2= vis.append('svg:path')
             .attr("d", lineFunc1(barData2))
             .attr("stroke", "#CB347D")
             .attr("stroke-width", 2)
             .attr("fill", "none")
             .attr('class', 'line');

    var totalLength = path1.node().getTotalLength();

    path2.attr("stroke-dasharray", totalLength + " " +totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(1000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);


    /*Draw the circles for second line*/
     var circles = vis.selectAll("circle").data(barData2);
      circles.enter()
      .insert("circle")
      .attr("cx1", function (d) { return (xRange(d.x)) + MARGINS.right; })
      .attr("cy2", function (d) { return y1Range(d.y2); })
      .attr("r", 3)
      .style("fill", "#CB347D");

Answer 1

问题是，在添加第二组圈子时，您要选择刚刚创建的第一组：

vis.selectAll("circle").data(barData2)

此选项将包含您刚刚添加的所有圈子。然后，您将数据与其匹配，这很好，但输入选择将为空（所有数据项与现有圆圈匹配）。因此，以下代码仅对输入选择起作用，不执行任何操作。

解决此问题的最简单方法是在第二组圆圈中添加一个可区分的类（理想情况下也是第一组圆圈）：

var circles = vis.selectAll("circle.second").data(barData2);
circles.enter()
  .insert("circle")
  .attr("class", "second")
  // ...

在d3.js中没有出现第二行的节点

1 个答案: