Question

我想为此第三方圆环图创建渐变填充：

这是js小提琴链接：jsfiddle.net/kjoh57mf /

或参考：

JS：

＆＃13;

git clone https://github.com/opencv/opencv.git

＆＃13;

var τ = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

// Define the gradient colors
gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: τ
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "#gradient")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * τ);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * τ);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / τ) * 100) + '%');

          return arc(d);
        };
      });
    }

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

＆＃13;

我尝试过的解决方案：

我尝试使用线性渐变添加并使用url引用填充：（＃＆＃39; #grady＆＃39;），但图表只是不会显示渐变。

以下是我尝试过的代码没有按预期工作的代码：

我添加了这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >

结合：.style（＆＃34; fill＆＃34;，＆＃34;＃grad1＆＃34;）;和.attr（＆＃39;填充＆＃39;，＆＃39; url（#grag1）＆＃39;）;

开放任何变通方法和改进。

Answer 1

您的主要问题在于您指定渐变的方式。你有：

.style("fill", "#gradient")

应该是什么时候：

.style("fill", "url(#gradient)")

var τ = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%");

// Define the gradient colors
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: τ
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * τ
      })
      .style("fill", "url(#gradient)")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * τ);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * τ);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / τ) * 100) + '%');

          return arc(d);
        };
      });
    }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >

向第三方纯色圆环图添加渐变

1 个答案: