D3动态重绘Y轴 [英] D3 Redraw Y-axes dynamically

问题描述

我想创建一个具有多个（线性）轴的动态图。绘制轴后，我想（当新数据到达时）更改Data Domain并重绘/更新轴。我可以用D3选择现有轴，并执行此操作，还是必须在我的代码中显式保存每个轴？我希望我的问题不会混淆。

  // init all Y轴
 $ .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）; 
 ...... 
 
 //更新Y轴（新数据到达后...）
 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）; 
  
 
 
 
 thx ...！
解决方案
 
您需要保留对轴对象的引用，以便可以再次调用它。选择包含它的DOM元素并调用将不工作。有很多关于如何更新轴的示例，例如。 此问题。
 
I would like to create a dynamic graph with multiple (linear) axes. After the axes have been drawn, I would like (as new data arrives) to change the Data Domain and redraw/update the axes. Can I select the existing axis with D3 and do this or do I have to explicitly save each axis in my code? I hope my question is not confusing.
// 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);
thx...!
解决方案
You need to keep references to the axis object so that you can call it again. Selecting the DOM element that contains it and calling that won't work. There are lots of examples on how to update axes, e.g. in this question.

                        
这篇关于D3动态重绘Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！