D3 Рисование линий в петле

Question

Итак, мой код here, если вы хотите его проверить.

В любом случае, я разрабатываю многострочный график с подсказками и легендой, в которой каждая строка исчезает щелчком. Проблема только в том, что мои строки не хотят генерировать внутри цикла (в моем случае, dataNest), что позволит мне создать уникальный идентификатор для каждой строки.

Это код, мне нужно, чтобы получить работу в этом цикле:

svg.append("path") 
    .attr("class", "line") 
    .style("stroke", function() { // Add the colours dynamically 
     return d.color = color(d.key); }) 
    .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID 
    .attr("d", line(d.values)); 

Answer 1

Вложение данных с помощью d3.nest()key() даст вам другую структуру данных для dataNest.

гнездо. ключ (функция)

... Каждый раз, когда ключ зарегистрирован, он помещается в конец внутреннего массива ключей, и результирующее отображение или записи будут иметь дополнительный уровень иерархии.

nest.key(function)

---

Таким образом, вы должны вызвать line при заполнении d атрибут как этот .attr("d", line(d.values[0].values)).

Here приведены примеры того, как работает d3.nest().

function init(){ 
 
    var data = [ 
 
    { 
 
     "label":"internal", 
 
     "values":[ 
 
     {"week":1,"val":37}, 
 
     {"week":2,"val":38}, 
 
     {"week":3,"val":33}, 
 
     {"week":4,"val":32}, 
 
     {"week":5,"val":40}, 
 
     {"week":6,"val":27}, 
 
     {"week":7,"val":30}, 
 
     {"week":8,"val":37}, 
 
     {"week":9,"val":42}, 
 
     {"week":10,"val":36}, 
 
     {"week":11,"val":35}, 
 
     {"week":12,"val":37}, 
 
     {"week":13,"val":33} 
 
     ] 
 
    }, 
 
    { 
 
     "label": "high", 
 
     "values": [ 
 
     {"week":1,"val":41}, 
 
     {"week":2,"val":41}, 
 
     {"week":3,"val":41}, 
 
     {"week":4,"val":39}, 
 
     {"week":5,"val":41}, 
 
     {"week":6,"val":49}, 
 
     {"week":7,"val":38}, 
 
     {"week":8,"val":42}, 
 
     {"week":9,"val":51}, 
 
     {"week":10,"val":38}, 
 
     {"week":11,"val":48}, 
 
     {"week":12,"val":50}, 
 
     {"week":13,"val":40}, 
 
     ] 
 
     }, 
 
     { 
 
     "label": "low", 
 
     "values":[ 
 
     {"week":1,"val":16}, 
 
     {"week":2,"val":17}, 
 
     {"week":3,"val":14}, 
 
     {"week":4,"val":15}, 
 
     {"week":5,"val":18}, 
 
     {"week":6,"val":20}, 
 
     {"week":7,"val":18}, 
 
     {"week":8,"val":14}, 
 
     {"week":9,"val":14}, 
 
     {"week":10,"val":19}, 
 
     {"week":11,"val":21}, 
 
     {"week":12,"val":16}, 
 
     {"week":13,"val":17}, 
 
     ], 
 
    }, 
 
    { 
 
     "label":"average", 
 
     "values":[ 
 
     {"week":1,"val":28.5}, 
 
     {"week":2,"val":29}, 
 
     {"week":3,"val":27.5}, 
 
     {"week":4,"val":27}, 
 
     {"week":5,"val":29.5}, 
 
     {"week":6,"val":34.5}, 
 
     {"week":7,"val":28}, 
 
     {"week":8,"val":28}, 
 
     {"week":9,"val":32.5}, 
 
     {"week":10,"val":28.5}, 
 
     {"week":11,"val":34.5}, 
 
     {"week":12,"val":33}, 
 
     {"week":13,"val":28.5} 
 
     ] 
 
    } 
 
    ] 
 

 
    var margin = { 
 
    top: 20, 
 
    right: 80, 
 
    bottom: 60, 
 
    left: 50 
 
    }, 
 
     width = 895 - margin.left - margin.right, 
 
     height = 355 - margin.top - margin.bottom; 
 

 
    var x = d3.scale.ordinal(); 
 

 
    var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
    var color = d3.scale.category20(); 
 

 
    var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom") 
 
    .ticks(6) 
 
    .tickSize(0); 
 

 
    var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left") 
 
    .tickSize(0); 
 

 
    var line = d3.svg.line() 
 
    .x(function (d) {return x(d.week);}) 
 
    .y(function (d) {return y(d.val);}) 
 
    .interpolate("Linear"); 
 

 
    // Define 'div' for tooltips 
 
    var div = d3.select('#multiline').append("div") // declare the properties for the div used for the tooltips 
 
    .attr("class", "tooltip") \t \t // apply the 'tooltip' class 
 
    .style("opacity", 0); \t \t \t \t // 
 

 
    var svg = d3.select('#multiline').append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    color.domain(data.map(function (d) { return d.label; })); 
 

 

 

 
    data.forEach(function (kv) { 
 
    var labelName = kv.label; 
 
    kv.values.forEach(function (d) { 
 
     d.val = +d.val; 
 
     d.label = labelName; 
 
    }); 
 
    }); 
 

 
    var dataNest = d3.nest() 
 
    .key(function(d) {return d.label;}) 
 
    .entries(data); 
 

 
    function make_y_axis() { \t \t // function for the y grid lines 
 
    return d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left") 
 
    .ticks(10) 
 
    } 
 

 
    var minY = d3.min(data, function (kv) { return d3.min(kv.values, function (d) { return d.val; }) }); 
 
    var maxY = d3.max(data, function (kv) { return d3.max(kv.values, function (d) { return d.val + 5; }) }); 
 

 
    var padding = width/(data[0].values.length + 1)/2; 
 
    x.domain(data[0].values.map(function (d) { return d.week; })) 
 
    .rangePoints([padding, width-padding]); 
 
    y.domain([0, 1.3*(maxY)]); 
 

 
    svg.append("svg:rect") // Grid lines Bakcground 
 
    .attr("x", 0) 
 
    .attr("y", 0) 
 
    .attr("height", height) 
 
    .attr("width", width) 
 
    .attr("fill", "#E6E6E6") 
 
    .style("opacity", "0.3"); 
 

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

 
    svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end"); 
 

 
    svg.append("g") \t \t // Draw the y Grid lines 
 
    .attr("class", "grid") 
 
    .call(make_y_axis() 
 
     .tickSize(-width, 0, 0) 
 
     .tickFormat("") 
 
     ); 
 

 
    var city = svg.selectAll(".branch") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "branch"); 
 

 
    city.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", function (d) { 
 
    return line(d.values); 
 
    }) 
 
    .style("stroke", function (d) { 
 
    return color(d.label); 
 
    }) 
 
    .style("fill", "none") 
 
    .style("stroke-width", 3); 
 

 
    svg.selectAll("g.dot") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "dot") 
 
    .selectAll("circle") 
 
    .data(function(d) { return d.values; }) 
 
    .enter().append("circle") 
 
    .attr("r", 2) 
 
    .attr("cx", function(d,i) { return x(d.week); }) 
 
    .attr("cy", function(d,i) { return y(d.val); }) 
 
    .style("stroke", function (d) { 
 
    return color(d.label); 
 
    }) 
 
    .style("fill", "none") 
 
    .style("stroke-width", 3) 
 

 
    // Tooltip stuff after this 
 
    .on("mouseover", function(d) { \t \t \t \t \t \t // when the mouse goes over a circle, do the following 
 
    div.transition() \t \t \t \t \t \t \t \t // declare the transition properties to bring fade-in div 
 
    .duration(200) \t \t \t \t \t \t \t \t // it shall take 200ms 
 
    .style("opacity", .9); \t \t \t \t \t \t // and go all the way to an opacity of .9 
 
    div .html(d.label + "<br/>" + d.week + "<br/>" + d.val) // add the text of the tooltip as html 
 
    .style("left", (d3.event.pageX) + "px") \t \t // move it in the x direction 
 
    .style("top", (d3.event.pageY - 28) + "px"); // move it in the y direction 
 
    }) \t \t \t \t \t \t \t \t \t \t \t \t // 
 
    .on("mouseout", function(d) { \t \t \t \t \t \t // when the mouse leaves a circle, do the following 
 
    div.transition() \t \t \t \t \t \t \t \t // declare the transition properties to fade-out the div 
 
    .duration(500) \t \t \t \t \t \t \t \t // it shall take 500ms 
 
    .style("opacity", 0); \t \t \t \t \t \t // and go all the way to an opacity of nil 
 
    }); 
 

 
    legendSpace = width/dataNest.length; // spacing for the legend 
 

 
    // Loop through each symbol/key 
 
    dataNest.forEach(function(d,i) { 
 

 
    svg.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", line(d.values[0].values)) 
 
    .attr("id", 'tag'+d.key.replace(/\s+/g, '')) 
 
    .style("stroke", color(d.label)) 
 
    .style("fill", "none") 
 
    .style("stroke-width", 3); 
 

 
    // Add the Legend 
 
    svg.append("text") 
 
    .attr("x", (legendSpace/2)+i*legendSpace) // space legend 
 
    .attr("y", height + (margin.bottom/2)+ 20) 
 
    .attr("class", "legend") \t // style the legend 
 
    .style("fill", function() { // Add the colours dynamically 
 
     return d.color = color(d.key); }) 
 
    .on("click", function(){ 
 
     // Determine if current line is visible 
 
     var active = d.active ? false : true, 
 
      newOpacity = active ? 0 : 1; 
 
     // Hide or show the elements based on the ID 
 
     d3.select("#tag"+d.key.replace(/\s+/g, '')) 
 
     .transition().duration(100) 
 
     .style("opacity", newOpacity); 
 
     // Update whether or not the elements are active 
 
     d.active = active; 
 
    }) 
 
    .text(d.key); 
 

 

 
    }); 
 

 

 
} 
 
init();

.axis path, .axis line { 
 
    fill: none; 
 
    shape-rendering: crispedges; 
 
    stroke: none; 
 
} 
 

 
.axis line{ 
 
    fill:none; 
 
    shape-rendering: crispedges; 
 
    stroke:grey; 
 
} 
 

 
.grid .tick { 
 
    stroke: grey; 
 
    opacity: 0.5 !important; 
 
} 
 
.bar rect { 
 
    fill: #ed1e79; 
 
} 
 

 
.bar text.value { 
 
    fill: black; 
 
} 
 
circle { 
 
    fill: blue; 
 
    stroke: blue; 
 
    stroke-width: 2; 
 
} 
 
.tooltip { 
 
    background: none repeat scroll 0 0 #ed1e79; 
 
    border: 0 solid #ffffff; 
 
    border-radius: 8px; 
 
    color: #ffffff; 
 
    font: 12px sans-serif; 
 
    height: 38px; 
 
    padding: 2px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 90px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="multiline"></div>