我正在使用D3.js处理堆积区域图表。当我将行路径附加到svg时,结果只是一条路径而不是多条线路径。我的数据结构与其他示例不同。我想知道如何在这个堆积区域图中绘制多条线路径?
以下是没有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>
答案 0 :(得分: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}]