Google chrome 使用组时，D3线性半径在铬中断裂

我一直在IE9/IE11上使用LinearGradient，一切正常，但当我在chrome上测试样本时，发现LinearGradient没有被渲染，当我将使用LinearGradient的形状包装在一个组上时，设法重现了这个问题 非工作组的工作版本

带组的断开版本

---

这不是Chrome的问题。这是您的脚本的问题

如果查看“组”示例中生成的实际SVG，您将看到以下结果：

<svg width="300" height="300">
  <defs>
    <linearGradient id="gradient" ... >
  </defs>
  <defs>
    <linearGradient id="gradient2" ... >
  </defs>
</svg>

---

所以没有

也没有

。因此，您的脚本有问题。

错误是：

var g=svg.selectAll（'g'）。append（'g'）。selectAll方法在将g元素插入文档之前不会找到任何g元素。看。
    var width = 300,  height = 300;
var svg = d3.select('#div').append('svg').attr('width', width).attr('height', height);
var g = svg.selectAll('g').append('g');


var gradient = svg.append("defs")
    .append("linearGradient").attr("id", "gradient")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);

var gradient2 = svg.append("defs")
    .append("linearGradient").attr("id", "gradient2")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient2.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient2.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);


var circle = g.append('circle')
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('r', height / 3)
    .attr('fill', 'url(#gradient)');

<svg width="300" height="300">
  <defs>
    <linearGradient id="gradient" ... >
  </defs>
  <defs>
    <linearGradient id="gradient2" ... >
  </defs>
</svg>