d3.js - D3 动态重绘 Y 轴

Question

我想创建一个具有多个(线性)轴的动态图。绘制轴后，我想(当新数据到达时)更改数据域并重绘/更新轴。我可以使用 D3 选择现有轴并执行此操作，还是必须在代码中明确保存每个轴？我希望我的问题不会令人困惑。

// init all Y-Axis
$.each(chart.YAxes, function (index) {
            var yScale, yAxis;
            yScale = d3.scale.linear().range([chartHeight, 0]);
            yScale.domain([this.YMin, this.YMax]);

            yAxis = d3.svg.axis()
                        .scale(yScale)
                        .ticks(10, this.Title)
                        .orient("left");

            d3Chart.append("g")
                   .attr("class", "yAxis " + "y" + this.ID)
                   .call(yAxis);
......

// update Y-Axis (after new data arrives...)
var myYAxis = d3.select(".y" + yAxis.ID);
var myScale = myYAxis. **// get Scale ??**
myScale.domain([newYMin, newYMax]);   
d3Chart.select(".y" + yAxis.ID)
            .transition().duration(300).ease("sin-in-out")
            .call(myYAxis);

谢谢...!

Answer 1

您需要保留对轴对象的引用，以便您可以再次调用它。选择包含它的 DOM 元素并调用它是行不通的。有很多关于如何更新轴的示例，例如在 this question .