D3中的嵌套圖和折線圖
[英]Nested plot and line graph in d3
問題描述
我有正確的繪圖圖和相關的顏色。 但是，我應該將每個圖用一條線連接起來。 有兩組情節。 因此，將有兩個單獨的線組（也稱為嵌套）。 我不確定該怎么做。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<style>
h1 { border-bottom: solid 3px #EBEBED; color: #545c61; font-size: 20px; padding-left: 35px; font-family: sans-serif; padding-bottom: 17px; font-weight: 500; margin-bottom: 37px; padding-top: 8px;}
circle{ fill:white; stroke-width: 3px;}
path { stroke: red; stroke-width: 2; fill: none; }
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 14pt;
}
.axis path, .axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.y.axis { stroke: #babfc5; }
.y.axis text{ font-weight:100; transform: translate(-24px,0px); }
.y.axis line { stroke: #EBEBED; stroke-width: 2; }
.x.axis { stroke: #8e8e8e; }
.x.axis text{ font-weight: 500; transform:translate(0px,14px)}
</style>
</head>
<body>
<h1>Example</h1>
<script>
var outerWidth = 1080;
var outerHeight = 330;
var margin = { left: 190, top: 30, right: 30, bottom: 40 };
var padding = 1.0;
var circleRadius = 8;
var xColumn = "month";
var yColumn = "amount";
var colorColumn = "monthv";
var yAxisTitlesOffset = { top: 10 }
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var xScale = d3.scale.ordinal()
.rangeBands([0, innerWidth],padding);
var yScale = d3.scale.linear()
.range([innerHeight,0]);
var colorScale = d3.scale.ordinal()
.domain(["top", "bot"])
.range(["#43B365", "#DA5A60" ])
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0); // Turn off the marks at the end of the axis.
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.ticks(4)
.tickSize(-innerWidth)
.outerTickSize(0)
.tickFormat( function(d) { return "$" + d} );
var format = d3.format(",");
var formattedX = format(yAxis);
function render(data){
xScale.domain( data.map( function (d){ return d[xColumn]; }));
yScale.domain([0, 2000]);
//if this code is inserted in the max value instead of 2000 - it will show the max data value d3.max(data, function (d){ return d[yColumn]; })
xAxisG.call(xAxis);
yAxisG.call(yAxis);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
//bind data
var circles = g.selectAll("circle").data(data);
//Enter
circles.enter().append("circle")
.attr("r", circleRadius);
//update
circles
.attr("cx", function (d){ return xScale(d[xColumn]); })
.attr("cy", function (d){ return yScale(d[yColumn]); })
.style("stroke", function (d){ return colorScale(d[colorColumn]); })
//exit
circles.exit().remove();
}
function type(d){
d.amount = +d.amount;
return d;
}
var data = [
{
"month": "Jan",
"monthv": "top",
"amount": 400
},
{
"month": "Jan",
"monthv": "bot",
"amount": 100
},
{
"month": "Feb",
"monthv": "top",
"amount": 800
},
{
"month": "Feb",
"monthv": "bot",
"amount": 250
},
{
"month": "Mar",
"monthv": "top",
"amount": 750
},
{
"month": "Mar",
"monthv": "bot",
"amount": 200
},
{
"month": "Apr",
"monthv": "top",
"amount": 850
},
{
"month": "Apr",
"monthv": "bot",
"amount": 250
},
{
"month": "May",
"monthv": "top",
"amount": 800
},
{
"month": "May",
"monthv": "bot",
"amount": 250
},
{
"month": "Jun",
"monthv": "top",
"amount": 850
},
{
"month": "Jun",
"monthv": "bot",
"amount": 250
},
{
"month": "Jul",
"monthv": "top",
"amount": 1000
},
{
"month": "Jul",
"monthv": "bot",
"amount": 300
},
{
"month": "Aug",
"monthv": "top",
"amount": 1050
},
{
"month": "Aug",
"monthv": "bot",
"amount": 300
},
{
"month": "Sep",
"monthv": "top",
"amount": 1000
},
{
"month": "Sep",
"monthv": "bot",
"amount": 300
},
{
"month": "Oct",
"monthv": "top",
"amount": 1200
},
{
"month": "Oct",
"monthv": "bot",
"amount": 300
},
{
"month": "Nov",
"monthv": "top",
"amount": 1100
},
{
"month": "Nov",
"monthv": "bot",
"amount": 250
},
{
"month": "Dec",
"monthv": "top",
"amount": 1250
},
{
"month": "Dec",
"monthv": "bot",
"amount": 250
}
];
render(data);
</script>
</body>
</html>
我想看起來像這樣http://bl.ocks.org/d3noob/38744a17f9c0141bcd04 。 但是，當我在代碼中定義該行並將其定義到路徑時，出現了錯誤。 不知道如何去做。
2 個解決方案
解決方案1
1 2016-10-03 01:50:27
首先，您必須將兩行的數據分開。 有幾種方法可以做到這一點。 在這里，我正在使用filter ：
var dataTop = data.filter(function(d){ return d.monthv == "top"});
var dataBot = data.filter(function(d){ return d.monthv == "bot"});
然后，將這些數據用於每一行：
g.append("path").attr("d", valueline(dataTop));
g.append("path").attr("d", valueline(dataBot));
我正在使用此解決方案，因為您只有2行。 如果您有多行代碼，則不同的方法可能更好（除非您想要大量的冗余代碼）。
這是您的小提琴： https : //jsfiddle.net/jh3foyn6/
解決方案2
1 已采納 2016-10-03 02:07:37
您忘記定義值線，即路徑生成器： d3.svg.line ：
var valueline = d3.svg.line()
.x(function(d) { return xScale(d[xColumn]); })
.y(function(d) { return yScale(d[yColumn]); });
請注意，對於數據的定義方式，您需要調用路徑生成器兩次，以對頂行和底行的數據進行過濾。您還可以准備將數據設置為每個月有一個對象，並在頂部和底部使用值線：
g.append("path")
.attr("class", "line")
.attr("d", valueTopline(data.filter( e => e[colorColumn] === "top")))
.style("stroke", colorScale("top"));
g.append("path")
.attr("class", "line")
.attr("d", valueTopline(data.filter( e => e[colorColumn] === "bot")))
.style("stroke", colorScale("bot"));
您還需要將路徑附加到組<g>而不是直接附加到svg以便比例匹配。
這是更新的jsbin代碼 ：
使用2級嵌套JSON創建帶有點的D3線圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.