javascript - d3路径渐变描边

Question

你好，我正在使用 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); }) 到路径元素，但它不起作用:( 谁能帮我？

Answer 1

您缺少的 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 属性。很乱。

也许只是尝试用线标记来表示开始和结束？