【发布时间】：2015-09-18 16:18:17
【问题描述】：
我对 D3 很陌生，这就是我迄今为止所做的事情here。
实际代码在这里：
var width = 1840,
height = 1480,
constant = 100,
color = "#BCD8CD"
var nodes = [
{label: '1st stage', x: constant, y: 215 , width:70,height:50 , color :color , stage: true },
{label: '2nd stage', x: constant + 150 , y: 215 ,width:70,height:50 ,color :color, stage: true },
{label: '3rd stage', x: constant + 279, y: 215 ,width:70,height:50, color :color, stage: false },
{label: '4th stage', x: constant + 460, y: 215 ,width:70,height:50, color :color, stage: false },
{label: '5th stage', x: constant + 660, y: 215 ,width:70,height:50 ,color :color, stage: false },
{label: '6th stage', x: constant + 350, y: 350 ,width:70,height:50, color :color, stage: true }
];
var links = [
{ source: 0, target: 1 },
{ source: 1, target: 2},
{ source: 2, target: 3},
{ source: 3, target: 4},
{ source: 1, target: 5}
];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var marker = svg.append('marker')
.attr('id',"triangle")
.attr('viewBox',"0 0 10 10")
.attr('refX',"0")
.attr('refY',"5")
.attr('markerUnits','strokeWidth')
.attr('markerWidth','4')
.attr('markerHeight','3')
.attr('orient','auto')
var path = marker.append('path')
.attr('d',"M 0 0 L 10 5 L 0 10 z")
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links);
force.linkDistance(width/4);
var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr("stroke-width", "2")
.attr('marker-end','url(#triangle)')
.attr('stroke','black')
var defs = svg.append("defs");
// create filter with id #drop-shadow
// height=130% so that the shadow is not clipped
var filter = defs.append("filter")
.attr("id", "drop-shadow")
.attr("height", "130%");
// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 3)
.attr("result", "blur");
// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
var feOffset = filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 2)
.attr("dy", 2)
.attr("result", "offsetBlur");
// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur")
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
var node = svg.selectAll('.node')
.data(nodes)
.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d){
return "translate("+d.x+","+d.y+")";
})
node.append("rect").attr("class", "nodeRect")
.attr("rx", 6)
.attr("ry", 6)
.attr('width', function(d) { return d.width; })
.attr('height', function(d) { return d.height; })
.style("fill", function(d) { return d.color; })
.transition()
.duration(1000) // this is 1s
.delay(1000)
.style("fill",function(d){if(d.stage) return "#FF9966"})
.style("filter",function(d){if(d.stage) return "url(#drop-shadow)"})
node.append("text").style("text-anchor", "middle")
.style("pointer-events", "none")
.style("font-weight", 900)
.attr("fill", "white")
.style("stroke-width", "0.3px")
.style("font-size", "16px")
.attr("y", function (d){return d.height/2+6;})
.attr("x", function (d){return d.width/2;})
.text(function (d) {return d.label;})
force.start();
link.attr('x1', function(d) { return d.source.x + d.source.width/2; })
.attr('y1', function(d) { return d.source.y + d.source.height/2; })
.attr('x2', function(d) { return d.target.x + d.target.width/2; })
.attr('y2', function(d) { return d.target.y + d.target.height/2; })
.transition()
.duration(1000) // this is 1s
.delay(1000)
.style("filter",function(d){if(d.source.stage) return "url(#drop-shadow)"})
这按预期工作，除了正在呈现的链接。例如这个链接：
但是我希望该链接是：
如何在 d3 中实现这一点？
【问题讨论】：
-
您可以使用d3.svg.line。
-
来吧，蝙蝠侠，我正在努力工作……我回答了你的问题，不是吗？ ;)
标签： javascript d3.js