多次调用svg.selectAll(X）.data(）.enter(）

calling svg.selectAll(X).data().enter() multiple times

本文关键字：data enter selectAll 调用 svg      更新时间：2023-11-21

我有一个函数drawticks，它在轴上绘制记号。记号来自一个有其坐标的数据结构。Ticks[0]是粒度最粗的Ticks。蜱虫[4]或任何最高的条目都有细粒度的蜱虫。我现在只想画0号记号。

function drawTicks(axis, width) {
  svg.selectAll("line")
    .data(data[axis].ticks[0])
  .enter().append("line")
    .attr("stroke", "pink")
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .attr("x1", function (d) {
      return xScale(d.x);
    })
    .attr("y1", function (d) {
      return h - yScale(d.y);
    })
    .attr("x2", function (d) {
      return xScale((d.x + (width * d.dx)));
    })
    .attr("y2", function (d) {
      return h - yScale((d.y + (width * d.dy)));
    });
}

我已经从控制台调用了它，以便在每个轴上单独测试它。它的行为是不确定的。有时，当我第二次调用它时，它会在第二轴上打勾，而其他时候则没有响应。

我希望有一个for循环来遍历所有轴，而不是逐个调用它们，但这不起作用，原因与它在控制台中不起作用相同。

我知道我可以对每个刻度标记说svg.append（line），而不是使用data（）.enter（），但我觉得d3约定希望我使用数据，而不是迭代数据结构中的点。

好的。为了不覆盖其他行，这里是我的最后一个代码：

function drawTicks(level, axis, wid){
var myClass = "axis"+axis+"-level"+level;
    svg.selectAll("."+"myClass")
        .data(data[axis].ticks[level])
        .enter()
        .append("line")
        .attr("stroke", "pink")
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .attr("class", myClass)
                }
相关文章：