Question

我试图扩展弧的内部元素，我尝试过下面的事情

var data = [96,4];
var svg = d3.select("body").append("svg")
.attr("width", "400")
.attr("height", "400")
.attr("id","table_pie_"+idname);

var width = 500,
    height = 700,
    radius = 100;

svgid = d3.select("#table_pie_"+idname);

var colors = ["#06f","#099","#548235","#ED7D31","#C30","rgb(244,189,23)"];
var color = d3.scaleOrdinal()
    .range(colors);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d; });

  var arcOver = d3.arc()
      .innerRadius(0)
      .outerRadius(150 + 10);


 var svg = svgid.append("g")
    .attr("transform", "translate(100 200)");
i = 0;
  var g = svg.selectAll(".arcH")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arcH");


  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { m=i; i++; return colors[m]; })
    .attr("stroke", "white")
    .attr("stroke-width", "5")
    ;

  g.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".30em")
      .attr("fill", "white")
      .style("font"," 13px 'Tw Cen MT Condensed'")
      .style("text-anchor","middle")    
      .text(function(d) { return d.data.toFixed(2)+"%"; });

为了扩展内弧，我尝试了以下内容

$( ".arcH path" ).last().attr( "d",  arcOver);

但它不起作用。实际上我已经复制了here的代码。

我也试过这个

g.append("path")
.attr("d", function(d){if(i==0){ return arc; } else{ return arcOver;} })
.style("fill", function(d) { m=i; i++; return colors[m]; })
.attr("stroke", "white")
.attr("stroke-width", "5")

Answer 1

让我们分析你的错误。

$( ".arcH path" ).last().attr( "d",  arcOver);

由于您使用了jQuery选择，此代码无法正常工作，您必须使用d3选择。

g.append("path")
  .attr("d", function(d){if(i==0){ return arc; } else{ return arcOver;} })

此代码不起作用，因为您应该返回函数调用结果，而不是函数本身。

所以用这种方式重写你的path变量：

var paths = g.append("path")
  .attr("d", function(dataItem, index, dataSet) {
    // here we get one of arc functions by index
    // if it is the last sector we use arcOver
    var currentArc = index === dataSet.length - 1 ? arcOver : arc;

    return currentArc(dataItem)
  })
  .style("fill", function(d, i) { return colors[i]; })
  .attr("stroke", "white")
  .attr("stroke-width", "5");

检查以下演示：

＆＃13;

var data = [96, 4];
var idname = '';
var svg = d3.select("body").append("svg")
  .attr("width", "400")
  .attr("height", "400")
  .attr("id", "table_pie_" + idname);

var width = 500,
  height = 700,
  radius = 100;

svgid = d3.select("#table_pie_" + idname);

var colors = ["#06f", "#099", "#548235", "#ED7D31", "#C30", "rgb(244,189,23)"];
var color = d3.scaleOrdinal()
  .range(colors);

var arc = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var labelArc = d3.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);
  
var pie = d3.pie()
  .sort(null)
  .value(function(d) {
    return d;
  });

var arcOver = d3.arc()
  .innerRadius(0)
  .outerRadius(150 + 10);


var svg = svgid.append("g")
  .attr("transform", "translate(100 200)");
i = 0;
var g = svg.selectAll(".arcH")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arcH");


var paths = g.append("path")
  .attr("d", function(dataItem, index, dataSet) {
  	var currentArc = index === dataSet.length - 1 ? arcOver : arc;

  	return currentArc(dataItem)
  })
  .style("fill", function(d, i) {
    return colors[i];
  })
  .attr("stroke", "white")
  .attr("stroke-width", "5");

g.append("text")
  .attr("transform", function(d) {
    return "translate(" + labelArc.centroid(d) + ")";
  })
  .attr("dy", ".30em")
  .attr("fill", "white")
  .style("font", " 13px 'Tw Cen MT Condensed'")
  .style("text-anchor", "middle")
  .text(function(d) {
    return d.data.toFixed(2) + "%";
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<div id="chart"></div>

＆＃13;

如何在d3.js中展开唯一一条弧？

1 个答案: