Question

刚遇到D3问题。我想要一个条形图，为每个数据值显示一个条形图。问题是这些标签具有相同的名称。

示例：

var x = d3.scale.ordinal()
.domain(["Bob", "Bob", "Terry", "Joe", "Bob", "Terry", "Joe", "Shiva", "Terry", "Joe"])
.rangeBands([margin.left, width - margin.right, width], .35);

在浏览器中查看时，会合并所有具有相同名称的数据（例如"Bob"）。在这种情况下，只有四个标签，而应该有10个。

如何让D3将每个名称视为单独名称？如果名称存储在名称位于d.Name

的数据文件（.json或.csv）中，那么也很酷

Answer 1

我认为你可以使用

const names = ["Bob", "Bob", "Terry", "Joe", "Bob", "Terry", "Joe", "Shiva", "Terry", "Joe"];

const x = d3.scale.ordinal()
    .domain(names.map((name, index) => index + name)) // it allows to create unique names
    .rangeBands([margin.left, width - margin.right, width], .35);

svg.selectAll('.x-axis .name-container').text((name) => name.substr(1)); // removing useless indexes

Answer 2

据我所知， D3 使用域的数学概念和函数范围（ f(x)=y ）和严格的域元素应该是唯一的。< / p>

因此，要使您的域名唯一，例如，如果您多次想要Bob，则需要通过添加Bob-1，Bob-2，Bob-3等将Bob作为唯一元素。

var x=d3.scale.ordinal().domain(["Bob1", "Bob2","Joe0", "Joe1", "Shiva", "Joe2"])
.rangeBands([0,500]);

Answer 3

您可以使用线性和 tickFormat 作为输出

var raw = ["Bob", "Bob", "Terry", "Joe", "Bob", "Terry", "Joe", "Shiva", "Terry", "Joe"]

var linear = d3.scale.linear()
               .domain([0, raw.length])
               .range([0, w]);

将以下代码添加到您的轴

var axis = d3.svg.axis()
             .scale(linear)
             .orient("top")
             .ticks(raw.length)
             .tickFormat(function(d) {
               return raw.charAt(d);
             });

D3 - 具有相同名称的序数标度标签

3 个答案: