具有多个图形的 D3 转换

Question

我正在尝试添加一个下拉菜单来选择要绘制的度量。我有 8 张图表，所有图表都绘制了相同的度量，但来自不同的种族。下面是代码，对我做错了什么有什么想法吗？现在我收到错误 exit() is not a function.

好的，我在以下方面取得了一些进展，但它仍然有点不稳定。图表在变化，但超出了图表 - yAxis 正在重新缩放到所有图表的最大值，而不是局部图表。:

function updateGraphs(newData) {


    d3.selectAll("svg").each(function(d, i){

        eachRace = d.values;
        svg = d3.select(this);
        yMax = d3.max(eachRace, function(d) { return d[newData]; });
        yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice();
        yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

        line = d3.svg.line()
        .x(function (d) { return x(d.date); })
        .y(function (d) { return yScale(d[newData]); })

        d3.transition().duration(1000).selectAll(".line")
        .attr("id", function(d) { return d.key ;})
        .attr('class', 'line')
        .attr('opacity', .8)
        .attr('d', function(d) { return line(d.values); })

        d3.selectAll(".y.axis")
        .call(yAxis);

    });
}

var svgContainer = d3.select("body").selectAll("svg")
    .data(data2)

    svgContainer.enter()
    .append("svg")
        .attr("width", 150)
        .attr("height", 400)
        .attr("transform", "translate(" + margin.left + "," + margin.top+ ")");

    d3.selectAll("svg").each(function(d, i){

        var eachRace = d.values;
        var svg = d3.select(this);
        var yMax = d3.max(eachRace, function(d) { return d.app; });
        var yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice();
        var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

        var line = d3.svg.line()
        .x(function (d) { return x(d.date); })
        .y(function (d) { return yScale(d.app); })

        svg.append("path")
        .attr("id", function(d) { return d.key ;})
        .attr('class', 'line')
        .attr('opacity', .8)
        .attr('d', function(d) { return line(d.values); })

        svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);


    });

Answer 1

感谢 JSBob 与我合作。我已经使用它了：

函数更新图表（新数据）{

d3.selectAll("svg").each(function(d, i){

    eachRace = d.values;
    svg = d3.select(this);
    yMax = d3.max(eachRace, function(d) { return d[newData]; });
    yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice();
    yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
    console.log(yMax);
    line = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return yScale(d[newData]); })

    svg.transition().duration(1000).select(".line")
    .attr("id", function(d) { return d.key ;})
    .attr('class', 'line')
    .attr('opacity', .8)
    .attr('d', function(d) { return line(d.values); });

    svg.transition().duration(1000).select(".y.axis")
    .call(yAxis);

});
}

具有多个图形的 D3 转换

D3 transitions with multiple graphs

javascript

transitions

d3.js