面积图渐变色填充

源自：3-1 面积图表

面积图渐变色填充

请问老师面积图的渐变色填充问题该怎么做呢好像css3的渐变色属性在这里的fill里面不起作用

提问者：qq_痛恍若隔世的幸福_0 2020-05-19 14:32

个回答

青山依旧ii: 2020-12-21 11:48:38

// 线性渐变 需要手动添加  linearGradient 标签
// 径向渐变同理
function linearGradient(container, color1, color2) {
  var defs = container.append("defs");

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

  gradient
    .append("stop")
    .attr("offset", "0%")
    .style("stop-color", color1.toString());

  gradient
    .append("stop")
    .attr("offset", "100%")
    .style("stop-color", color2.toString());

  return gradient;
}