具有多个图的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与我合作。 我已经使用了：

函数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);
    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);

});
}