我是d3的新手，目前有一个简单的折线图，可以显示两行以表示一组的某些数据。我想做的是能够灵活地为多个组创建多行。每个组将有几行，并且将为组父级进行颜色编码-在本例中，我的数据是资产或股票行情记录
当前，您可以在我的代码中看到我正在为每个路径手动创建一个数组，但是如果我开始拥有100条路径，我想这可能会变得非常混乱。有更好的方法吗？
我尝试使用d3.nest，但我一生都无法确定数据的方式，因此可以为每组线应用更新/输入/退出模式
这是我的在制品代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<div id="graphDiv"></div>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data_set = [{
'Date': '2009-03-23','Raw': 25,'Raw2': 25,'Asset': 'A'
},{
'Date': '2009-03-24','Raw': 28,'Raw2': 25.4,{
'Date': '2009-03-25','Raw': 26,'Raw2': 25.37,'Asset': 'B'
},{
'Date': '2009-03-26','Raw': 22,'Raw2': 25.03,{
'Date': '2009-03-27','Raw': 19,'Raw2': 24.42,'Asset': 'C'
},{
'Date': '2009-03-28','Raw': 23,'Raw2': 24.28,'Asset': 'D'
}
]
var margin = {
top: 30,right: 50,bottom: 30,left: 50
};
var svgWidth = 600;
var svgHeight = 1000;
var graphWidth = svgWidth - margin.left - margin.right;
var graphHeight = svgHeight - margin.top - margin.bottom;
// var parseDate = d3.timeParse("%d/%m/%Y");
var parseDate = d3.timeParse("%Y-%m-%d");
var x = d3.scaleTime().range([0,graphWidth]);
var y = d3.scaleLinear().range([graphHeight,0]);
var z = d3.scaleOrdinal(d3.schemeCategory10); // for colours
var xAxis = d3.axisBottom().scale(x).ticks(10);
var yAxis = d3.axisLeft().scale(y).ticks(10);
// Need to create the lines manually for each bit of data
var line = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.y);
});
// Creates the SVG area within the div on the dom
// Just doing this once
var svg = d3.select("#graphDiv")
.append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight)
var g = svg.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")
.call(d3.zoom().on("zoom",function() {
svg.attr("transform",d3.event.transform)
}));
// Add the X Axis
g.append("g").attr("class","x axis")
.attr("transform","translate(0," + graphHeight + ")")
.call(xAxis);
// Text label for x axis
g.append("text")
.style("text-anchor","middle")
.text("timeseries dates")
.attr("transform","translate(" + (graphWidth / 2) + "," + (graphHeight + margin.top) + ")");
// Add the Y Axis
g.append("g")
.attr("class","y axis")
.call(yAxis);
// text label for the y axis
g.append("text")
.attr("transform","rotate(-90)")
.attr("y",0 - margin.left)
.attr("x",0 - (graphHeight / 2))
.attr("dy","1em")
.style("text-anchor","middle")
.text("price points");
function drawGraph(data_set) {
let pathData = []
//assume 2 paths
pathData.push([])
pathData.push([])
// Pass in the data here
data_set.forEach(function(d) {
let path0 = {}
let path1 = {}
path0.date = parseDate(d.Date)
path1.date = parseDate(d.Date)
path0.y = +d.Raw
path1.y = +d.Raw2
pathData[0].push(path0)
pathData[1].push(path1)
});
x.domain(d3.extent(data_set,function(d) {
return parseDate(d.Date);
}));
y.domain([
d3.min(data_set,function(d) {
return Math.min(d.Raw,d.Raw2)
}),d3.max(data_set,function(d) {
return Math.max(d.Raw,d.Raw2)
})
]);
var lines = g.selectAll(".path")
.data(pathData)
lines.exit().remove()
var enter = lines.enter()
.append("path")
.attr("class","path")
.style("stroke",(d,i) => z(i))
var merge = enter.merge(lines)
.attr("d",line)
}
// display initial chart
window.onload = drawGraph(data_set)
// Push new data every 5 seconds for a specific date
var h = setInterval(function() {
data_set.push({
'Date': '2009-03-29','Raw': Math.floor(Math.random() * 50),'Raw2': Math.floor(Math.random() * 25),{
'Date': '2009-03-30',{
'Date': '2009-03-31',{
'Date': '2009-04-01',{
'Date': '2009-04-02',{
'Date': '2009-04-03','Asset': 'A'
});
drawGraph(data_set);
},5000);
</script>
</body>```