【问题标题】:D3 Redraw Y-axes dynamicallyD3 动态重绘 Y 轴
【发布时间】:2014-02-19 11:23:10
【问题描述】:

我想创建一个具有多个(线性)轴的动态图。绘制轴后,我想(随着新数据的到来)更改数据域并重绘/更新轴。我可以使用 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);

谢谢...!

【问题讨论】:

  • 你能提供一个小提琴吗?

标签: d3.js


【解决方案1】:

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

【讨论】:

  • 我同意你的观点,至少,我无法让它工作。老实说,我认为应该有办法做到这一点。实际上,在您在代码的三个部分中放置唯一全局引用的示例中,只是 svg 对象,我认为我们可以从 DOM 中获取它。但是,确实它没有重新绘制比例,我不明白为什么....
  • @ackuser 您可能应该就此发表一个单独的问题。至少从您的评论来看,我不清楚问题是什么。
猜你喜欢
  • 2021-11-24
  • 1970-01-01
  • 2015-07-14
  • 1970-01-01
  • 2017-03-28
  • 1970-01-01
  • 1970-01-01
  • 2021-12-28
  • 2022-12-19
相关资源
最近更新 更多