d3.js-更新轴并更改路径宽度

d3.js - update axis and change width of path

本文关键字：路径 js- 更新 d3      更新时间：2023-09-26

我正在尝试更新轴的宽度，如下所示：

初始设置为零宽度：

var x2 = d3.scale.linear()
        .domain([0, 10])
        .range([0, 0])
        .clamp(true);
svg.append("g")
        .attr("class", "x axis2")
        .attr("transform", "translate(0," + height / 2 + ")")
        .call(d3.svg.axis()
          .scale(x2)
          .orient("bottom")
          .tickFormat(function(d) { return d; })
          .tickSize(0)
          .tickPadding(12))
      .select(".domain")
      .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
        .attr("class", "bar-highlight");

稍后我想更新路径的宽度（有一个很好的过渡会很好）。我按照这个答案中的建议尝试了一下，但没有成功：

x2 = d3.scale.linear()
        .domain([0, data.page_count])
        .range([0, 15])
        .clamp(true);
d3.selectAll("g.x.axis2")
        .call(x2);

您需要在轴上调用d3.svg.axis().scale(x2)，而不仅仅是x2。以下更新程序对我有效（尽管是在一个空的图上）：

// Update the range of existing variable, x2
x2.range([0, 15]);
// Select and change the axis in D3
d3.selectAll("g.x.axis2")
    .call(d3.svg.axis().scale(x2));
相关文章：