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与我合作。我使用过它：

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);
    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转换为多个图形

1 个答案: