向第三方纯色甜甜圈图添加渐变 [英] Adding gradient to 3rd party solid color donut chart
本文介绍了向第三方纯色甜甜圈图添加渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为此第三方甜甜圈图创建渐变填充:
I wanted to create a gradient fill for this third party donut chart:
这是js小提琴链接:jsfiddle.net/kjoh57mf/
或参考此内容:
JS:
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);
};
});
}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 >我尝试的解决方案:
我尝试添加线性渐变，并使用url:('#gradient')引用填充，但是图形不会显示渐变.
I tried added with linear gradient and refer the fill with url:('#gradient'), but the graph just won't show up with gradient.
这是我尝试过的无法正常工作的代码:
Here is the code I had tried that doesn't work as expected:
我添加了
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
耦合:.style("fill"，#grad1");和.attr('fill'，'url(#grad1)');
Coupling with: .style("fill", "#grad1"); and .attr('fill', 'url(#grad1)');
为任何变通方法和改进而开放.
Open for any workaround and improvement.
推荐答案
您的主要问题是分配渐变的方式.你有:
Your main issue was with the way you assigned the gradient. You had:
.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 >这篇关于向第三方纯色甜甜圈图添加渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
