D3.js v3 点 Plot 直方图重复值

Question

我正在使用 d3.js v3 构建一个点 plot 直方图，并且我已经完成了几乎所有的工作 - 除了出于某种原因我的一些数据点重复（某些圆圈重复自己 - 不是全部，只是一些）。 我尝试调整轴参数以及数据本身[删除了具有 null 值的行等] - 但遗憾的是无济于事。

任何帮助将不胜感激。

这是我的相关代码：

<div id="dotHappy"></div>

var data = d3.csv('happy_dot_modified.csv', function(data) {

 data.forEach(function(d) {
    d["city"] = d["city"];
    d["Happy"] = +d["Happy"];
    d["thc"] = +d["thc"];
 });

 var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
},
width = 1560 - margin.left - margin.right,
height = 1260 - margin.top - margin.bottom;

我尝试了这个编码器块，但它不起作用。 （不确定这是否甚至是给我带来问题的原因 - 也许不是）。

// var x = d3.scale.linear()
//     .range([0, width]);

所以我选择了这个：

var x = d3.scale.ordinal()
.rangePoints([0, width])

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var svg = d3.select("#dotHappy")
 .append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var chart = svg.append("g")
 .attr("id", "chart");

还尝试对此进行调整，这可能是问题的一部分，也可能不是问题的一部分。

x.domain(data.map(d => d.Happy));
y.domain([5, 33]);
// y.domain(data.map(d => d.city));

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis)
 // .append("text")
 .attr("class", "label")
 .attr("x", width)
 .attr("y", -6)
 .style("text-anchor", "end")
 .text("Happy");

svg.append("g")
 .attr("class", "y axis")
 // .attr("transform", "translate(0," + width + ")")
 .call(yAxis)
 // .append("text")
 .attr("class", "label")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("dy", ".71em")
 .style("text-anchor", "end")
 .text("THC");

var groups = svg.selectAll(".groups")
 .data(data)
 .enter()
 .append("g")
 .attr("transform", function(d) {
    return "translate(" + x(d.Happy) + ".0)";
 });

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.thc + 1)
    // return d3.range(d.thc)
})
.enter().append("circle")
.transition().duration(1000)
.attr("class", "dot")
.attr("r", 10)
.attr("cy", function(d) {
    return y(d)
})
.style("fill", "blue")
.style("opacity", 1);

})

这是我的 csv 文件的快照：

city.  |.   Happy.    | thc
Boston.       37.        23
NYC.          22.        30
Chicago.      88.        5

以下是它当前外观的屏幕截图。 因此，在这种情况下，显示文本框“The Sister”的工具提示应该只针对一个圆圈（因为它应该只有一个数据点），但是如果您将 hover 放在它下面的其他 10 个橙色圆圈上，一切都一样 -表示它总共重复了 11 次：

Answer 1

实际上，所有的圆圈都在垂直重复。 您可能看不到它们，因为在绘制这些其他圆圈时，重复的圆圈被其他彩色圆圈重叠。 例如，黄色数据点“姐姐”一直重复到底部，但黄色数据点下方的数据点，蓝色、粉红色、绿色、蓝色等，将自己绘制在黄色重复的顶部.

罪魁祸首是这段代码：

.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.thc + 1)
    // return d3.range(d.thc)
})
.enter().append("circle")

如果你不想让它重复，那应该只是一行：

.append("circle")

为了解释发生了什么，这段代码：

var groups = svg.selectAll(".groups")
 .data(data)
 .enter()
 .append("g")
 .attr("class", "groups") //NOTE: you should add this line since you have 'selectAll(".groups")'
 .attr("transform", function(d) {
    return "translate(" + x(d.Happy) + ".0)";
 });

已经为 csv 文件中的每一行创建了一个g元素。 对于每个g ，您使用d3.range(1, +d.thc + 1)创建了一个数组，并为该数组中的每个项目附加了一个圆圈。 举个例子，让我们以代表“The Sister”数据点的行为例，它的 THC 为 33。对于那个数据点，代码创建一个<g> ，在其中绑定数组[1, 2, 3, ..., 33] ，因此将 33 个圆圈附加到<g>元素， cy属性介于y(1)和y(33)之间。

现在，接下来的问题是，您使用y.domain([5, 33])指定了一个至少为 5 的域。 然而，使用d3.range生成的数据有界数组始终以 1 开头并递增到 THC 的值。 因此数组中的一些值（1、2、3 和 4）总是落在 y 轴之外，但 d3 能够将其转换到适当的 y 位置。 那可能吗？ 默认情况下，是的，当数据在域之外时， d3.scale推断。

默认情况下，钳位是禁用的，因此如果将输入域之外的值传递给刻度，则刻度可能会通过线性外推返回 output 范围之外的值。 例如，使用默认域和范围 [0,1]，输入值 2 将返回 output 值 2。