d3js不進入行函數
[英]d3js does not enter into line function
問題描述
我想用以下代碼在d3上畫一條線。（ http://jsfiddle.net/totaljj/L9n7qnv1 ）
它繪制x，y軸，但在附加d屬性時不進入線功能。
您可以在第104行進行調試，以查看代碼沒有輸入到行函數中。
任何幫助，將不勝感激。
<!DOCTYPE html>
<html>
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<!-- Page Content -->
<div>
<svg width="430" height="250"></svg>
</div>
<section>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data=
'{"recordsFiltered":5,"raCounts":[{"name":"comp_name","values":[{"date_":"2016","actual":170.0,"DT_RowId":"row_null"},{"date_":"2015","actual":198.0,"DT_RowId":"row_null"},{"date_":"2015","actual":149.0,"DT_RowId":"row_null"},{"date_":"2014","actual":197.0,"DT_RowId":"row_null"},{"date_":"2014","actual":146.0,"DT_RowId":"row_null"}],"DT_RowId":"row_null"}],"draw":null,"recordsTotal":5}';
var d = JSON.parse(data);
draw(d.raCounts);
function draw(data){
//svg
var svg = d3.select("svg"),
margin = {top: 100, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//time
var parseTime = d3.timeParse("%Y%m%d");
//domain
// var x = d3.scaleTime().range([0, width]),
var x = d3.scaleLinear().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
//line
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) {
return x(d.date_); })
.y(function(d) {
return y(d.actual); });
//domain
x.domain(d3.extent(data[0].values, function(d) {
return d.date_; }));
y.domain([
d3.min(data, function(c) {
return d3.min(c.values, function(d) {
return d.actual; }); }),
d3.max(data, function(c) {
return d3.max(c.values, function(d) {
return d.actual; }); })
]);
z.domain(data.map(function(c) {
return c.DT_RowId; }));
//axis
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("count");
var ra = g.selectAll(".ra")
.data(data)
.enter().append("g")
.attr("class", "ra");
//ra line
ra.append("path")
.attr("class", "line")
.attr("d",
function(d) { return
line(d.values); })
.style("stroke-dasharray", ("1","1"));
}
</script>
</section>
</body>
</html>
3 個解決方案
解決方案1
3 已采納 2017-01-02 10:13:11
解決方案2
3 2017-01-02 10:50:53
我認為Gerardo Furtado的答案和Luke Woodward的答案都很好，但是兩者都繞開了OP的解決方案有些偏離的事實。 為了充分利用數據綁定，典型方法如下所示：
//ra line
ra.selectAll("path.line")
.data(function(d) { return [d.values]; })
.enter().append("path")
.attr("class", "line")
.attr("d", line)
僅通過line生成器函數可以在return語句后擺脫自動分號插入的麻煩。 另一方面，對path.line元素進行數據綁定仍然允許同一條語句繪制多條線。
請看以下示例片段：
var data = '{"recordsFiltered":5,"raCounts":[{"name":"comp_name","values":[{"date_":"2016","actual":170.0,"DT_RowId":"row_null"},{"date_":"2015","actual":198.0,"DT_RowId":"row_null"},{"date_":"2015","actual":149.0,"DT_RowId":"row_null"},{"date_":"2014","actual":197.0,"DT_RowId":"row_null"},{"date_":"2014","actual":146.0,"DT_RowId":"row_null"}],"DT_RowId":"row_null"}],"draw":null,"recordsTotal":5}'; data = JSON.parse(data).raCounts; //svg var svg = d3.select("svg"), margin = { top: 100, right: 80, bottom: 30, left: 50 }, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //time var parseTime = d3.timeParse("%Y%m%d"); //domain // var x = d3.scaleTime().range([0, width]), var x = d3.scaleLinear().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); //line var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.date_); }) .y(function(d) { return y(d.actual); }); //domain x.domain(d3.extent(data[0].values, function(d) { return d.date_; })); y.domain([ d3.min(data, function(c) { return d3.min(c.values, function(d) { return d.actual; }); }), d3.max(data, function(c) { return d3.max(c.values, function(d) { return d.actual; }); }) ]); z.domain(data.map(function(c) { return c.DT_RowId; })); //axis g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("count"); var ra = g.selectAll(".ra") .data(data) .enter().append("g") .attr("class", "ra"); //ra line ra.selectAll("path.line") .data(function(d) { return [d.values]; }) .enter().append("path") .attr("class", "line") .attr("d", line) .style("stroke-dasharray", ("1", "1"));
<style> .axis--x path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style>
<script src="https://d3js.org/d3.v4.js"></script> <svg width="430" height="250"> </svg>
解決方案3
0 2017-01-02 10:17:15
您沒有將正確的數據傳遞給線路生成器。 它應該是：
ra.append("path")
.attr("class", "line")
.attr("d", line(data[0].values))
.style("stroke-dasharray", ("1", "1"));
這是您更新的小提琴： http : //jsfiddle.net/67zs8ph7/
PS ：這只會畫一條線（請參閱下面的評論）
d3js在對象上調用動畫，enter / append不是函數
[英]d3js call animations on an object, enter/append is not a function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.