你好,我正在使用 d3 对 Angular 线图,并想在链接我的圈子的路径中添加渐变...
我正在生成我的树:
var width = 800,
height = 700;
element.html('');
var color = d3.interpolateLab("#008000", "#c83a22");
var scale = d3.scale.linear().domain([0, 100]).range(["red", "green"]);
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select('#tab-manageAccess').append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(40,0)');
/*svg.append("linearGradient")
.attr("id", "line-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(0))
.attr("x2", 0).attr("y2", y(1000))
.selectAll("stop")
.data([
{offset: "0%", color: "red"},
{offset: "40%", color: "red"},
{offset: "40%", color: "black"},
{offset: "62%", color: "black"},
{offset: "62%", color: "lawngreen"},
{offset: "100%", color: "lawngreen"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });*/
var nodes = cluster.nodes(scope.accessTree),
links = cluster.links(nodes);
var link = svg.selectAll('.link')
.data(links)
.enter().append('path')
.attr('class', 'link')
.attr('d', diagonal);
var node = svg.selectAll('.node')
.data(nodes)
.enter().append('g')
.attr('class', 'node')
.attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; });
node.append('circle')
.attr('r', 4.5);
node.append('text')
.attr('dx', function(d) { return d.children ? -8 : 8; })
.attr('dy', 3)
.style('text-anchor', function(d) { return d.children ? 'end' : 'start'; })
.style('font-weight', 'bold')
.attr('fill', function (d) {
var color = '#4D7B88';
if (d.depth === 0) {
color = '#7F3762';
} else if(d.depth === 1) {
color = '#83913D';
}
return color;
})
.text(function(d) { return d.name; });
d3.select(self.frameElement).style('height', height + 'px');
我找到了这个例子:https://gist.github.com/mbostock/4163057我使用 d3.interpolateLab("#008000", "#c83a22");
创建了可变颜色,然后添加了 .style("fill", function(d) { return color(d.t ); })
.style("stroke", function(d) { return color(d.t); })
到路径元素,但它不起作用:( 谁能帮我?
最佳答案
您缺少的 Mike Bostock 代码的一个方面是他将路径分成数百个不同的子路径,并分别为每个子路径设置颜色。转到 http://bl.ocks.org/mbostock/4163057 的实时版本并检查 DOM 以了解实际情况。
他为什么要这么做?因为,虽然您可以将 SVG 线条或路径的描边设置为渐变,但您不能告诉它让渐变跟随该线条的斜率或曲线。渐变的 Angular 是在创建渐变时定义的,基于:
使用它的元素的矩形边界框
(如果gradientUnits
设置为ObjectBoundingBox
),或者绘制对象的用户坐标系
(如果gradientUnits
设置为userSpaceOnUse
)。
您设置它的方式(在您注释掉的代码中)基本上在整个图像上创建了一个隐藏的渐变背景,然后让它在您画线的任何地方显示出来。显然不是您想要的。
因此,Mike 的复杂函数及其创建的数百个子路径。可能也不是您想要的,特别是如果您希望图表具有交互性。
对于简单的线条,还有另一种方法可以让渐变从线条的开始到结束正确排列。
我有一个非常简单的示例,其中包含纯 SVG(无 D3):http://codepen.io/AmeliaBR/pen/rFtGs
简而言之,您必须将线条定义为与渐变匹配的方向,然后使用变换(缩放/旋转/平移)将线条实际定位到您想要的位置。
在 D3 中实现的难度取决于布局的复杂程度。如果您只是使用简单的线条,我认为这会起作用:
使用来自 (x1,y1) 和 (x2,y2) 值的简单几何计算直线的长度及其斜率,
绘制从 (0,0) 到 (0,length) 的直线(假设垂直渐变),
添加
translate(x1,y1) rotate(slope)
的转换属性
对于路径,您需要知道要处理的路径类型,并使用正则表达式来解析和编辑路径的 d 属性。很乱。
也许只是尝试用线标记来表示开始和结束?
关于javascript - d3路径渐变描边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20706603/