我正在努力实现这一目标
但这是我现在所拥有的 基本上我需要做的就是弄清楚如何从弧开始处的圆圈中发出线条。
我的问题是,如何将弧起始位置转换为svg线的x1,y1属性。 下面是我目前有关绘制线条的代码:
// Draw lines emanating out g.append('line') .attr('class', 'outer-line') .attr('x1', function(d) { return 0; }) .attr('x2', 0) .attr('y1', -radius) .attr('y2', -radius-150) .attr('stroke', function(d, i) { return color(i); }) .attr('stroke-width','2') .attr("transform", function(d) { return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")"; });I'm trying to achieve this
but this is currently what I have Essentially all I need to do is figure out how to have the lines emanating out from the circle starting at the arc start.
My question is exactly that, how can I translate the arc starting position into the x1,y1 attribute of an svg line. Below is the code that I currently have pertaining to drawing the lines:
// Draw lines emanating out g.append('line') .attr('class', 'outer-line') .attr('x1', function(d) { return 0; }) .attr('x2', 0) .attr('y1', -radius) .attr('y2', -radius-150) .attr('stroke', function(d, i) { return color(i); }) .attr('stroke-width','2') .attr("transform", function(d) { return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")"; });最满意答案
如果我正确理解您的问题,您可以使用d.startAngle :
g.attr("transform", function(d) { return "rotate(" + d.startAngle * (180/Math.PI) + ")"; });点击这里查看示例(点击“运行代码段”):
var dataset = [300, 200, 400, 200, 300, 100, 50]; var width = 460, height = 300, radius = Math.min(width, height) / 2; var color = d3.scale.category20(); var pie = d3.layout.pie() .sort(null); var arc = d3.svg.arc() .innerRadius(radius - 100) .outerRadius(radius - 50); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var path = svg.selectAll("path") .data(pie(dataset)) .enter().append("path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc); var g = svg.selectAll(".groups") .data(pie(dataset)) .enter() .append("g"); g.append('line') .attr('class', 'outer-line') .attr('x1', 0) .attr('x2', 0) .attr('y1', -radius + 50) .attr('y2', -radius) .attr('stroke', 'black') .attr('stroke-width','2') .attr("transform", function(d) { return "rotate(" + d.startAngle * (180/Math.PI) + ")"; });<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>If I understand your problem correctly, you can use just d.startAngle:
g.attr("transform", function(d) { return "rotate(" + d.startAngle * (180/Math.PI) + ")"; });Check here an example (click on "run code snippet"):
var dataset = [300, 200, 400, 200, 300, 100, 50]; var width = 460, height = 300, radius = Math.min(width, height) / 2; var color = d3.scale.category20(); var pie = d3.layout.pie() .sort(null); var arc = d3.svg.arc() .innerRadius(radius - 100) .outerRadius(radius - 50); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var path = svg.selectAll("path") .data(pie(dataset)) .enter().append("path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc); var g = svg.selectAll(".groups") .data(pie(dataset)) .enter() .append("g"); g.append('line') .attr('class', 'outer-line') .attr('x1', 0) .attr('x2', 0) .attr('y1', -radius + 50) .attr('y2', -radius) .attr('stroke', 'black') .attr('stroke-width','2') .attr("transform", function(d) { return "rotate(" + d.startAngle * (180/Math.PI) + ")"; });<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
更多推荐
发布评论