节点未在d3.js

出现为第二线我有使用d3.js.Both 2行的图线来自不同数据集，但Y轴的范围是相同的两者的线路。我正在显示这两条线的节点。第一行的节点显示正常。但第二行的节点不出现。可以请任何人告诉我是什么问题？这是我的节点和线的代码。节点未在d3.js

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

来源

2014-10-20 Kalpana Gupta

的问题是，加入第二组圆的时候，你选择刚刚创建的第一组：

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

，这一选择将包含所有你刚刚圆添加。然后你将数据与它匹配，这很好，但输入选择将是空的（所有数据项目都与现有的圈子相匹配）。因此，下面的代码只对输入选择进行操作，它什么也不做。

解决这个问题的最简单方法是一个显着的类添加到第二组圆（理想的第一个为好）：

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

来源

2014-10-20 08:28:21

回答

相关问题