d3.svg.diagonal如何读取数据？
d3.svg.diagonal如何读取数据？
提问于 2018-07-19 12:44:46
当读取对角线数据时，我无法理解d3的行为。
下面，我以行和对角线变量从我的job_small.csv中读取数据。我在每个步骤中都加入了console.log步骤。
我注释掉最后两行代码中的任何一行来绘制对角线或线。
当我运行绘制行时，这些脚本成功运行，控制台日志输出48，48,240，96,384。
当我跑去绘制对角线时，这个脚本失败了。console.log步骤显示x和y的值为NaN。
我无法理解对角线变量中发生了什么，在对角线变量中，它表示不能像行变量那样读取数据对象。
我的job_small.csv中的数据是: sx，sy，tx，ty\n 1，1，5，5，5，2，7，6，8,8,17,14
d3.csv("/static/data/job_small.csv", function (data) {
var canvas = d3.select("body").append("svg").attr("width",600).attr("height",600);
var x_scale = d3.scale.linear().domain([0,20]).range([0, 960]);
var y_scale = d3.scale.linear().domain([0,20]).range([300, 0]);
var diagonal = d3.svg.diagonal()
.source( function (d) {
var x=x_scale(d['sx']);
var y=x_scale(d['sy']);
var p={};
p.x=x;
p.y=y;
console.log(x) // When these print, they show Nan
console.log(y) // When these print, they show Nan
return p;
})
.target( function (d) {
var x=x_scale(d['tx'])
var y=x_scale(d['ty'])
var p={};
p.x=x;
p.y=y;
return p;
});
var line = d3.svg.line()
.x(function(d) { var x=x_scale(d['sx']);console.log(x); return x; })
.y(function(d) { var y=x_scale(d['sy']);console.log(y); return y; });
// When I print console for this line var, I get 48,48,240,96,384,384
var path = canvas.append('path').attr('d', diagonal(data)); // Get error
var path = canvas.append('path').attr('d', line(data)); // This runs successfully
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-19 13:46:52
与行生成器不同，d3.svg.diagonal期望一个数据(而不是数据)作为参数。
因此，您必须选择哪个对象为源，哪些对象为目标。例如，让我们以第一个源和第二个为目标：
var diagonal = d3.svg.diagonal()
.source(function(d) {
var x = x_scale(d[0]['sx']);
var y = x_scale(d[0]['sy']);
//first object----^
var p = {};
p.x = x;
p.y = y;
return p;
})
.target(function(d) {
var x = x_scale(d[1]['tx'])
var y = x_scale(d[1]['ty'])
//second object---^
var p = {};
p.x = x;
p.y = y;
return p;
});下面是工作演示：
var csv = `sx,sy,tx,ty
1,1,5,5
5,2,7,6
8,8,17,14`;
var data = d3.csv.parse(csv);
var x_scale = d3.scale.linear().domain([0, 20]).range([0, 960]);
var y_scale = d3.scale.linear().domain([0, 20]).range([300, 0]);
var diagonal = d3.svg.diagonal()
.source(function(d) {
var x = x_scale(d[0]['sx']);
var y = x_scale(d[0]['sy']);
var p = {};
p.x = x;
p.y = y;
return p;
})
.target(function(d) {
var x = x_scale(d[1]['tx'])
var y = x_scale(d[1]['ty'])
var p = {};
p.x = x;
p.y = y;
return p;
});
var svg = d3.select("body").append("svg").attr("width", 600).attr("height", 600);
var path = svg.append('path').attr('d', diagonal(data));path {
fill: none;
stroke: black;
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51423066
复制相关文章
相似问题
腾讯云开发者
