将线条添加到堆积面积图 D3

Question

我正在使用 D3.js 制作堆积面积图。当我将线路路径附加到 svg 时，结果证明它只是一条路径而不是多条线路路径。我的数据结构与其他示例不同。我想知道如何在这个堆积面积图中绘制多条线路径？

Here is the link

这里是没有 csv 文件的代码：

var formatDate = d3.time.format("%Y");

var fullwidth = 500,
  fullheight = 380;

var margin = {top: 80, right: 30, bottom: 80, left: 40},
    width = fullwidth - margin.left - margin.right,
    height = fullheight - margin.top - margin.bottom;

var xScale = d3.time.scale()
.domain([2014,2021])
    .range([0, width]);

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

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

var colorScale = d3.scale.ordinal()
				.domain(["Not meet","Nearly meet","Standard","Exceed"])
				.range(["#F2F094","#CCE19A","#8DBF79","#467E43"]);  

var ordinal =  d3.scale.ordinal()
        .domain(["Not meet","Nearly meet","Standard","Exceed"])
        .range(["#F2F094","#CCE19A","#8DBF79","#467E43"]);

// var linecolor = d3.scale.ordinal()
//         .domain(["Not meet","Nearly meet","Standard","Exceed"])
//         .range(["#BBB84B","#789952","#50DB51","#2D602A"]);




var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .outerTickSize(0);
    
   
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("right")
    .tickSize(width)
    .tickFormat(function(d){return d + "%";})
    .ticks(6);

var stack = d3.layout.stack()
    .offset("zero") // try "silhouette" next, that's a streamgraph!
    //.order("inside-out")  // try this and see what you think
    .values(function(d) { return d.values; })
    .x(function(d) { return formatDate.parse(d.Year);})
    .y(function(d) { return +d.Pct; });

// use the result of the stack to draw the shapes using area
var area = d3.svg.area()
    .interpolate("cardinal")
    .defined(function (d) { 
      // console.log(d);
      return d.Pct !== "null";
    })
    .x(function(d) { return xScale(formatDate.parse(d.Year)); })
    .y0(function(d) { return yScale(d.y0); })
    .y1(function(d) { return yScale(d.y0 + d.y); });

//define the line
    var line = d3.svg.line()
    .defined(function (d) { 
      // console.log(d);
      return d.Pct !== "null";
    })
    .x(function(d) {return xScale(formatDate.parse(d.Year));})
    .y(function(d) { return yScale(+d.New);});

var svg = d3.select("#chart").append("svg")
    .attr("width", fullwidth )
    .attr("height", fullheight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("test.csv", function(error, data) {
	if(error){console.log(error);};

console.log(data);

	var priorities = ["Exceed","Standard","Nearly meet","Not meet"];

	var dataset =  d3.nest()
    .key(function(d) {
      return d.Level;
    })
    .sortKeys(function(a,b) {
    return priorities.indexOf(b) - priorities.indexOf(a);})  // customize order
    .sortValues(function (a, b) { return formatDate.parse(a.Year) - formatDate.parse(b.Year)})
    .entries(data);

  // console.log(dataset);

var layers = stack(dataset);
// console.log("layers", layers);  // it adds a y and y0 to the data values.

// reset these after doing the layer stacking.
  xScale.domain(d3.extent(data, function(d) { return formatDate.parse(d.Year); }));
  yScale.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); // highest combo



newyScale.domain([0, d3.max(data, function(d){return +d.New;})]);




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

  svg.append("g")
      .attr("class", "y axis")
      .call(customYAxis);

svg.selectAll(".layer")
      .data(layers)
    .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout)
      .style("fill", function(d, i) { return colorScale(i); }); 
      // .append("title")
      // .text(function(d) {
      //   return d.key; // level is the key in the nest
      // });

svg.append("path")
    .data([data])//tricky part 
    .attr('class',"line")
    .attr("d",line)
    .style("stroke", "white" );

svg.append("g")
.attr("class","legendOrdinal")
.attr("transform","translate(" +(20)+","+(-80)+")");

var legendOrdinal = d3.legend.color()
      .shapeWidth(50)
      .shapePadding(50)
      .orient('horizontal')
      .labels(["Standard Not meet","Standard Nearly meet","Standard","Exceed"])
      .scale(ordinal);

svg.select(".legendOrdinal")
      .call(legendOrdinal)
      .selectAll(".label")
      .call(wrap,50);

//wrap the label
function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.0, // ems
        y = text.attr("y"),
        dy = parseFloat(0),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", "1em").text(word);
      }
    }
  });
}

//mouseover function
function mouseover(){
	d3.select(this).classed("highlight", true)
};

function mouseout(){
d3.select(this).classed("highlight", false);
};

// Axis style
function customYAxis(svg) {
 svg.call(yAxis);

   svg.select(".domain").remove();

  svg.selectAll(".tick:not(:first-of-type) line").attr("stroke-dasharray", "2,2");

  svg.selectAll(".tick text").attr("x", 0)
  	 .attr("dy", -4)
  	 .style("text-anchor", "end")
  	 .attr("class","small");
};

// Manually add text to Axis
 svg.append("text") 
    .attr("transform", "translate(" + (width / 7) + " ," + (height + margin.top/3)+")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2015");

    svg.append("text") 
    .attr("transform", "translate(" + (2 * width / 7) + " ," + (height+margin.top/3) +")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2016");

    svg.append("text") 
    .attr("transform", "translate(" + (3 * width / 7) + " ," + (height+margin.top/3) +")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2017");

    svg.append("text") 
    .attr("transform", "translate(" + (5 * width / 7) + " ," + (height+margin.top/3) +")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2015");

 	svg.append("text") 
    .attr("transform", "translate(" + (6 * width / 7) + " ," + (height+margin.top/3) +")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2016");

    svg.append("text") 
    .attr("transform", "translate(" + width + " ," + (height+margin.top/3) +")")
    .style("text-anchor", "middle")
    .attr("class","blueT")
    .text("2017");

svg.append("text") 
    .attr("transform", "translate(" + (width/3.5) + " ," + (height + margin.bottom - 5 ) +")")
    .style("text-anchor", "middle")
    .attr("class","blackT")
    .text("Math");

svg.append("text") 
    .attr("transform", "translate(" + (3*width/3.5) + " ," + (height + margin.bottom - 5) +")")
    .style("text-anchor", "middle")
    .attr("class","blackT")
    .text("English");


 });

body {
    font-family: 'Proxima Nova', Georgia, sans-serif;
}

text.label{

fill:#4A4A4A;
font-size:12px;

}

.highlight{
fill:#F7E50A!important;
}

.blueT{
	fill:#407DC6;
	font-size:16px;
}

.blackT{
	fill:#4A4A4A;
	font-size:23px;
}

.small{
	fill:#4A4A4A;
	font-size: 14px;
}

.x.axis text{
	display: none;
}

.x.axis tick{
	display: none;
}

.path:hover{
fill:#407DC6;
}

.axis path,
.axis line {
  fill: none;
  stroke: #B9B7B7;
  shape-rendering: crispEdges;
}

<div id="chart"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"></script>

Answer 1

要添加多个路径，您需要将它们分别添加到 svg，在您的代码中，我看到只有一个路径附加到 svg。我使用此代码创建了一个多折线图，这只是我向 svg 添加多个路径的代码。

var  chartWidth = 748,
chartHeight = 580 ;


var svg = d3.select("#chart").append('svg')
.attr('width', chartWidth)
.attr('height', chartHeight)
.attr('id', "d3Chart");


var  margin = {top: 20, right: 40, bottom: 150, left: 70}, 
     width = +svg.attr("width") - margin.left - margin.right,
     height = +svg.attr("height") - margin.top - margin.bottom,


var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 //I have multiple y axis in my chart, two on the left and one on the right 
 //if you don't need multiple y axis then use just one.  Also in path 
 //generator use the same variable for converting the data into coordinates.

var x = d3.scaleTime().range([0, width]),    //time scale with range     
   y = d3.scaleLinear().range([height, 0]),  //for y axis on the right
   y2 = d3.scaleLinear().range([height, 0]), //for 2nd y axis main chart
   y3 = d3.scaleLinear().range([height, 0]); //for 3rd y axis main chart


//path generator for data
var pathGeneratorVergleich1 = d3.line()
                .x(function(d) { return x(d.date); }) //return the x axis value to be ploted on chart
                .y(function(d) { return y2(d.varVergleich1); });//returns the y axis value to be ploted on chart

var pathGeneratorVergleich2 = d3.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y3(d.varVergleich2); });


focus.append("path")
        .attr("id", "path1")
        .style('fill', 'none')
        .style('stroke', '#6FFF00') /*fancy green*/
        .style('stroke-width', '2px')
        .data([dataX])
        .attr('d', pathGeneratorVergleich1);  

focus.append("path")
        .attr("id", "path2")
        .style('fill', 'none')
        .style('stroke', '#FFFF41') /*fancy yellow*/
        .style('stroke-width', '2px')
        .data([dataX])
        .attr('d', pathGeneratorVergleich2);

我的 dataX 看起来像这样：

[{date: Thu Aug 24 2017 13:44:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.564 , varVergleich1: 0.356, varVergleich2: 0},
{date: Thu Aug 24 2017 13:36:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.640, varVergleich1: 0.355, varVergleich2: 0},
{date: Thu Aug 24 2017 13:28:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.764, varVergleich1: 0.357, varVergleich2: 0},
{date: Thu Aug 24 2017 13:20:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.760, varVergleich1: 0.355, varVergleich2: 0},
{date: Thu Aug 24 2017 13:12:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.564, varVergleich1: 0.35, varVergleich2: 0},
{date: Thu Aug 24 2017 13:04:22 GMT+0200 (Mitteleuropäische Sommerzeit), varKurve: 0.164, varVergleich1: 0.351, varVergleich2: 0}]