Question

我有一个绘制轴上刻度的函数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约定会要求我使用数据而不是迭代遍历点我的数据结构。

Answer 1

确定。为了不覆盖其他行，这是我的最终代码：

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)
                }

多次调用svg.selectAll（X）.data（）。enter（）

1 个答案: