Question

我查看了类似的问题，但仍无法正确实现代码。

User

这是一个JSON文件：

var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

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

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

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("staff.json", function(error, json_data) {

var data = d3.nest()
.key(function(d) {
  return d.Position;
})
.rollup(function(d) {
  return d.length;
}).entries(json_data);

data.forEach(function(d) {
d.percentage = d.values / json_data.length;
});

console.log("data variable", data);
console.log("pie(data)", pie(data));

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
.on('mouseover', function() {
  var current = this;  
  var others = svg.selectAll(".arc").filter(function(el) {
    return this != current
  });
  others.selectAll("path").style('opacity', 0.8);
})
.on('mouseout', function() {
  var current = this;
  d3.select(this)
    .style('opacity', 1);
  var others = svg.selectAll(".arc").filter(function(el) {
    return this != current
  });
  others.selectAll("path").style('opacity', 1);
});


g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
  return color(i);
});

g.append("text")
.attr("transform", function(d) {
  return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
  console.log("d is", d);
  return percentageFormat(d.data.percentage);
});

实际上，如果我没有弄错的话，传说只是与数据绑定的矩形。但在我的情况下，JSON文件中的项目不是数值。请查看我的实验结果my plunk。

Answer 1

在您的代码中：

您正在设置图例选择中的数据错误

  var legend = ...
  .data(pie(data))//this is wrong
  .enter().append("g")

你需要这样做

      var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .selectAll("g")
      .data(data)//setting the data as we know there are only two set of data[programmar/tester] as per the nest function you have written
      .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) {
  return color(d.key);
});

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d.key; });

工作代码here

希望这有帮助！

Answer 2

实际上它在你的代码中，

    public static BitmapImage GetImage(Contact con)
    {
        if (con == null || con.Thumbnail == null)
        {
            return null;
        }

        var bitmapImage = new BitmapImage();
        bitmapImage.DecodePixelHeight = 256;
        bitmapImage.DecodePixelWidth = 256;


        Action load = async () =>
        {
            using (IRandomAccessStream fileStream = await con.Thumbnail.OpenReadAsync())
            {
                await bitmapImage.SetSourceAsync(fileStream);
            }
        };

        load();

        return bitmapImage;
    }

我没有评论，也没什么变化。你可以观察代码。

如何将图例添加到饼图D3.js？

2 个答案: