D3:将d3.svg.diagonal()替换为d3.svg.line()
D3:将d3.svg.diagonal()替换为d3.svg.line()
提问于 2013-04-18 04:59:04
我已经用d3.svg.diagonal()渲染的边实现了下面的图。但是，当我尝试用d3.svg.line()替换对角线时，它似乎没有拉出目标和源数据。我遗漏了什么？关于d3.svg.line有什么我不理解的地方吗？
下面是我引用的代码，后面是完整的代码：
var line = d3.svg.line()
.x(function(d) { return d.lx; })
.y(function(d) { return d.ly; });..。
var link= svg.selectAll("path")
.data(links)
.enter().append("path")
.attr("d",d3.svg.diagonal())
.attr("class", ".link")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("shape-rendering", "auto")
.attr("fill", "none"); 完整的代码：
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width =1500,
height = 1500,
diameter = Math.min(width, height),
radius = diameter / 2;
var balloon = d3.layout.balloon()
.size([width, height])
.value(function(d) { return d.size; })
.gap(50)
var line = d3.svg.line()
.x(function(d) { return d.lx; })
.y(function(d) { return d.ly; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")")
root = "flare.json";
root.y0 = height / 2;
root.x0 = width / 2;
d3.json("flare.json", function(root) {
var nodes = balloon.nodes(root),
links = balloon.links(nodes);
var link= svg.selectAll("path")
.data(links)
.enter().append("path")
.attr("d",d3.svg.diagonal())
.attr("class", ".link")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("shape-rendering", "auto")
.attr("fill", "none");
var node = svg.selectAll("g.node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node");
node.append("circle")
.attr("r", function(d) { return d.r; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
node.append("text")
.attr("dx", function(d) { return d.x })
.attr("dy", function(d) { return d.y })
.attr("font-size", "5px")
.attr("fill", "white")
.style("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
.text(function(d) { return d.name; })
});比较使用“line”时svg的d属性是如何消失的。
回答 4
Stack Overflow用户
发布于 2013-11-21 17:09:10
这个问题很过时，但由于我没有看到答案，而且有人可能会面临同样的问题，所以这里就是这个问题。
简单地用直线替换对角线不起作用的原因是因为d3.svg.line和d3.svg.diagonal返回不同的结果：
- d3.svg.diagonal返回接受数据及其索引的函数，并使用投影将其转换为路径。换句话说，diagonal.projection确定函数将如何从提供的datum.
- d3.svg.line返回函数获取点的坐标，该函数接受直线的点数组并将其转换为路径。方法line.x和line.y确定如何从所提供的数组
的单个元素中检索点的坐标
因此，您不能在d3选择中直接使用d3.svg.line的结果(至少当您想要绘制多条线时)。
您需要将其包装在另一个函数中，如下所示：
var line = d3.svg.line()
.x( function(point) { return point.lx; })
.y( function(point) { return point.ly; });
function lineData(d){
// i'm assuming here that supplied datum
// is a link between 'source' and 'target'
var points = [
{lx: d.source.x, ly: d.source.y},
{lx: d.target.x, ly: d.target.y}
];
return line(points);
}
// usage:
var link= svg.selectAll("path")
.data(links)
.enter().append("path")
.attr("d",lineData)
.attr("class", ".link")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("shape-rendering", "auto")
.attr("fill", "none"); 这里是发布的jsFiddle mobeets的工作版本：jsFiddle
Stack Overflow用户
发布于 2013-07-16 02:05:01
我也有同样的问题...有一个jsFiddle here。
请注意，将line更改为diagonal将使其正常工作。
Stack Overflow用户
发布于 2013-10-28 21:51:53
也许封装对角线函数并编辑其参数对您有用：
var diagonal = d3.svg.diagonal();
var new_diagonal = function (obj, a, b) {
//Here you may change the reference a bit.
var nobj = {
source : {
x: obj.source.x,
y: obj.source.y
},
target : {
x: obj.target.x,
y: obj.target.y
}
}
return diagonal.apply(this, [nobj, a, b]);
}
var link= svg.selectAll("path")
.data(links)
.enter().append("path")
.attr("d",new_diagonal)
.attr("class", ".link")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("shape-rendering", "auto")
.attr("fill", "none"); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16070150
复制相关文章
相似问题
腾讯云开发者
