1

我试图了解如何根据节点的值使用渐变。我已经想出了如何基于任意颜色进行渐变，例如“粉红色”->“黄色”，但我试图弄清楚如何让对角线渐变从基于源节点和目标节点的值开始。我的项目基于 mike bostock 的“可折叠树”： http ://bl.ocks.org/mbostock/4339083

这是相关的代码。我一直在寻找高低试图弄清楚如何做到这一点。

我的节点有一个值“.epoch”，它介于 min_epoch 和 max_epoch 之间，并根据以下代码着色：

function epochColor(d) {
  var blueRed = d3.scale.linear()
    .domain([min_epoch, max_epoch])
    .range(["blue", "red"]);
  return blueRed(d);
}

function myEpochColor(d) {
  return (epochColor(d.epoch));
}

我已经尝试了任意数量的变体来获得从目标值到源值的梯度，但没有运气。我认为问题在于，当评估梯度代码时，它对节点一无所知。我试着放入一个 .call(function)... 没有爱。

.link {
  fill:         none;
  stroke-width: 3px;
  opacity:      1.00;
  stroke:       url(#myEpochGradient);
}

...

var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
      .attr("id", "myEpochGradient")
      .attr("gradientUnits", "objectBoundingBox")
      .attr("x1",   "0%").attr("y1", "0%")
      .attr("x2", "100%").attr("y2", "0%");
    gradient.append("svg:stop")
      .attr("offset", "0%")
      .attr("stop-opacity", 1)
      .attr("stop-color", function(d) {return myEpochColor(d.source)});
    gradient.append("svg:stop")
      .attr("offset",   "100%")
      .attr("stop-opacity", 1)
      .attr("stop-color", function(d) {return myEpochColor(d.target)});

任何帮助弄清楚这一点将不胜感激。

蒂亚-基思

4

2 回答 2

1

我认为这里有一些关于渐变定义如何在 SVG 中工作的困惑。即使上面的代码有效，您也无法让它适用于您的所有节点，因为每次更改停靠点时，您都​​会为引用渐变的所有内容更改它们。对于所需的每种颜色-颜色过渡，您至少需要一个渐变定义。

最简单的方法（虽然我不能说它的渲染性能）很可能是g为每个链接的每个元素添加一个新的渐变，然后根据链接的源节点和目标节点设置它的停靠点。给它一个唯一的 id，然后在对角元素中引用它。上面用于渐变的代码应该大部分都可以工作，IFF 而不是附加到 SVG，而是附加到绑定了链接数据g的元素- 你的代码的主要问题是你没有绑定任何数据任何地方，所以梯度元素在函数中没有任何引用。stop-color

于 2013-08-11T04:29:36.017 回答
0

只需尝试将我的 c# 代码转换为您想要的语言。它会通过颜色值和作为参数发送的数字为您提供渐变 

    using System;
    using System.Windows.Media;
    using SDColor = System.Drawing.Color;

    //Developed by امین امیری دربان
    namespace APREndUser.CodeAssist
    {
        public static class ColorHelper
        {
            public static SWMColor ToSWMColor(SDColor color) => SWMColor.FromArgb(color.A, color.R, color.G, color.B);
            public static SDColor ToSDColor(SWMColor color) => SDColor.FromArgb(color.A, color.R, color.G, color.B);
            public static SWMBrush ToSWMBrush(SDColor color) => (SolidColorBrush)(new BrushConverter().ConvertFrom(ToHexColor(color)));
            public static string ToHexColor(SDColor c) => "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
            public static string ToRGBColor(SDColor c) => "RGB(" + c.R.ToString() + "," + c.G.ToString() + "," + c.B.ToString() + ")";
            public static Tuple<SDColor, SDColor> GetColorFromRYGGradient(double percentage)
            {
                var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
                var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
                var blue = 0.0;
                SDColor result1 = SDColor.FromArgb((int)red, (int)green, (int)blue);
                SDColor result2 = SDColor.FromArgb((int)green, (int)red, (int)blue);
                return new Tuple<SDColor, SDColor>(result1, result2);
            }
        }

    }
于 2018-07-21T23:15:01.587 回答