我创建了一个填充图案的饼图。我想使图案与其所在扇区的中心线平行。我尝试更改patternTransform
参数来旋转图案,但不知道如何获得正确的度数。
我如何才能做到这一点?
我的当前代码:
<script src="https://unpkg.com/d3@5.15.1/dist/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<svg width="300" height="200"> </svg>
<svg>
<defs>
<pattern id="pattern0"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect id="rotateRect" x="5" y = "5" width = "10" height = "10" fill = " #87CEFA "/>
</pattern>
</defs>
<defs>
<pattern id="pattern1"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect id="rotateRect" x="5" y = "5" width = "10" height = "10" fill = " #4169E1 "/>
</pattern>
</defs>
<defs>
<pattern id="pattern2"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect id="rotateRect" x="5" y = "5" width = "10" height = "10" fill = " #000080 "/>
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern0);" />
<rect x="100" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="200" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
</svg>
<script>
var data = [{ year: '2001', value:10 },
{ year: '2002', value:30 },
{ year: '2003', value:60 },
]
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal(['#4daf4a','#377eb8','#ff7f00','#984ea3','#e41a1c']);
// Generate the pie
var pie = d3.pie().value(function(d) {
return d.value;});
// Generate the arcs
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
//Generate groups
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
//Draw arc paths
arcs.append("path")
.attr("d", arc)
.attr('stroke', "black")
.attr('stroke-width', '1')
.attr("fill", function(d,i) { return "url(#pattern" + i +")"});
</script>
</script>
先谢谢你了。
1条答案
按热度按时间tct7dpnv1#
由于
patternTransform
属性是在模式上定义的,因此需要在运行时动态创建<pattern>
元素。d3.pie(data)
返回一个对象数组,这些对象具有startAngle
和endAngle
等属性。您可以使用它们来计算所需的旋转:我本来希望只定义一次模式几何,然后将其作为模板重用,但不幸的是,至少Firefox没有通过阴影树模型实现样式继承。因此,如果我这样做...
...图案中使用的填充颜色仍为黑色。