Question

我无法绕过操纵d3js中的数据对象。我计划创建一个由水平条组成的图表来保存数据元素。每个数据元素都是一个圆圈。我想出了如何将圆圈插入不同的条形图中，但我仍然坚持如何在每个条形图中均匀地分隔圆圈。例如，如果宽度为800且有8个圆圈，则x属性应为100*i。

这是我项目的链接：https://plnkr.co/edit/fHrdJsItEqA5qc35iUxG?p=preview

我认为问题是如何在这段代码中引用数据对象。无论如何，我想在我的代码中使用scaleBand（我在之前的代码中定义为变量x来平均分隔圈子：

var x = d3.scaleBand()
    .range([0,width]);

我认为解决方案看起来像这样：.attr("x",x.domain(data.map(function(d,i){return d[i]})); x.bandwidth()，但显然数据不是正确的对象。

选择每个栏并插入圆圈：

  bar.selectAll("rect")
.data(function(d,i){console.log(data_group[i].values.length);return data_group[i].values})
.enter().append("circle")
.attr("class","circle")
.attr("width", width)
//.attr("x",) //how to equally space these circle elements???
.attr("height",20)
.attr("y", y.bandwidth())
console.log(y.bandwidth());

一如既往，我真的很感谢你的帮助。

Answer 1

您的代码存在许多阻止其正常工作的问题，包括：

您没有为x比例设置域名。
您正试图将<circle>放在<rect>内，但您无法在SVG中嵌套形状。你应该把它们放在<g>。
<circle>的位置是使用cx和cy属性设置的（您还需要为其提供r半径属性）。

要解决您的问题，您需要确定您的商品布局方式。因为您在问题中引用了索引，所以我将使用它。

您将数据分成嵌套组，每个组都有一个values数组。您正在为该数组中的每个数据呈现<circle>，因此您需要确定最长values数组的长度。

var longest = data_group.reduce(function(acc, curr) {
  return curr.values.length > acc ? curr.values.length : acc;
}, -Infinity);

获得最长values数组的长度后，您可以为x比例设置域。

您正在使用d3.scaleBand（d3.scalePoint可能会在这里工作得更好），这是一个有序的比例。序数量表适用于离散域，这意味着您需要为每个可能的输入（索引）设置域值。为此，您需要生成从0到longest-1的可能索引数组。

var domainValues = d3.range(longest);

现在您已拥有输入域值，您可以将其设置为x比例。

x.domain(domainValues);

然后，对于每个<circle>，您将使用其组中的圆圈索引和cx比例设置其x值。

.attr('cx', function(d,i) { return x(i); })

正如我在开头提到的那样，你的代码中还有其他错误，所以修复它不会让它正常运行，但它应该会把你推向正确的方向。

无法在d3js中引用数据对象

1 个答案: