D3在循环中绘制线条

Question

所以，如果你想查看它，我的代码是here。

无论如何，我正在开发一个带有工具提示和图例的多线图，每一行都会通过点击消失。唯一的问题是，我的线路不想在循环内部（在我的情况下，dataNest）生成，这将让我为每一行创建一个唯一的ID。

这是我需要在该循环中工作的代码：

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提供不同的数据结构。

  

窝。的键（功能）

     

...每次注册一个密钥时，它都会被推送到内部密钥数组的末尾，生成的一个或多个条目将具有其他层次结构级别。

http://www.nltk.org/book/

因此，在填写此line的{​​{1}}属性时，您必须致电d。

nest.key(function)是关于.attr("d", line(d.values[0].values))如何运作的一些示例。

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")		   // apply the 'tooltip' class
  .style("opacity", 0);				 //

  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() {		// 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")		 // 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) {						  // when the mouse goes over a circle, do the following
    div.transition()								  // declare the transition properties to bring fade-in div
    .duration(200)								  // it shall take 200ms
    .style("opacity", .9);						  // 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")		 // move it in the x direction 
    .style("top", (d3.event.pageY - 28) + "px");  // move it in the y direction
  })												  // 
  .on("mouseout", function(d) {						 // when the mouse leaves a circle, do the following
    div.transition()								  // declare the transition properties to fade-out the div
    .duration(500)								  // it shall take 500ms
    .style("opacity", 0);						 // 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")	// 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;
}