时间戳

首页 > 解决方案 > d3v4 结帐图表 - 确保图例和圆圈的配色方案正确

javascript - d3v4 结帐图表 - 确保图例和圆圈的配色方案正确

问题描述

所以我制作了这个原型图——并想创建一种鸟瞰图——金字塔类型的图表。

在此处输入图像描述 在此处输入图像描述

例如，对于foursquare——餐馆、肉店、咖啡馆——会有不同的相关属性——比如计数、切金、流行度

这是图表的第 3 版。 http://jsfiddle.net/0ht35rpb/33/

这是版本 4 https://jsfiddle.net/pLo6mubx/

        var color = d3.scaleOrdinal()
            .range(["#a8e6cf", "#dcedc1", "#ffd3b6", "#ffaaa5"]);

- 但我不确定颜色是否正确 - 好像 A 系列中的计数很小 - 查看其他系列时是否一致 - 圆圈的大小可能会改变 - 但它实际上只是它的层。我想确保数据正确表示 - 并且颜色在整个圆圈本身和图例中都是正确的。- 此外，如果有一种方法可以清理对角指向的标签 - 随着组的整体大小可能发生变化，它会变得混乱 - 所以这会导致角度发生变化。

所以图表本身应该是正确的，因为它调用了数据索引

        circles.enter().append("circle")
        .attr("cy", height / 2)
        .attr("cx", 0)
        .attr("r", function(d) {
            return scale(Math.sqrt(d.value));
        })
        .style("fill", function(d) {
            return color(d.index);
        });

但是图例只使用了一系列数据，并且只是循环显示了颜色。

        ring.enter().append("circle")
          .attr("cy", function(d, i) {
            return (vertical * i) + ringRadius;
          })
          .attr("r", ringRadius)
          .attr("width", ringRadius*2)
          .attr("height", ringRadius*2)
          .style("fill", function(d, i) {
            return color(i);
          });

6 月 8 日 - 最新版本 - https://jsfiddle.net/e8bmyvra/1/ - 剩余“修复指针标签位移”

标签： javascriptd3.js

解决方案

So from your updates it seems like the remaining problem is fixing the labels for the numbers so that they have the same angle and snap to the centre of the circles instead of the circumferences. We can actually accomplish this with some minor modifications of your code. Specifically at two places:

  1. When drawing the lines that point to the number labels, we remove the code that displaces the lines according to the circle radius. For y1 we give it the y-value for the centre of the circle, and for x2 and y2 we give them a fixed displacement. i.e.

    newGroups.append("g").attr("class", "datumLine")
  .append("line")
  .attr("class", "datumValue")
  .attr("y2", 30) // <---- Adjusted this value slightly
  .attr("y1", function(d) {
    return height / 2; // <---- note that we remove the dependence on radius here
  })
  .attr("x2", function(d) {
    return (height / 2) - 70; // <---- Likewise we use a fixed displacement here
});

  2. For the portion where we add the numbers 200, 500, 4000, 2000, we likewise remove the code that displaces the numbers according to the circle radius and give it a fixed value (the same value we use for the x2 attribute in the code above). We also adjust the rotation slightly. i.e.

    newGroups.append("text")
  .attr("class", "datumValue")
  .attr("y", 10)
  .text(function(d) {
    return fetchValue(d.items, focus);
  })
  .attr("transform", function(d) {
    return "translate(" + ((height / 2) - 70) + ",20) rotate(-60)"; // <- Note changes here
});

The exact numbers used in the example above, such as displacement and rotation, can be altered as desired. This is just an example of values that avoids the problem of the lines intersecting adjacent circles. Here is a jsfiddle of the results https://jsfiddle.net/a8qod3z0/:

Final output

Let me know if this is your intended output, or if you had something different in mind and we can work on that!

推荐阅读