D3.js 单击按钮更新折线图

我需要通过点击按钮来更新折线图。我找到了这个例子，它很接近我需要的。我唯一的区别是，我需要多个按钮，如示例所示。我需要4个按钮。我遵循提供的bl.ock中显示的示例，但将其扩展为有4个按钮来加载4个不同的csv文件；每个按钮都加载自己独特的csv数据。当我单击不同的按钮时，数据会加载，而线形图会像示例中的图形一样更新，但当我单击第三个按钮或有时我可以单击第四个按钮时，浏览器将崩溃。这看起来像是数据过载。有人能说出浏览器冲突的原因吗？我的每个csv文件保存大约10条记录。我想，这么多的记录不应该使浏览器崩溃。我重复了链接示例中的步骤，但只针对4个按钮。我迷路了。如有任何建议，将不胜感激。编辑以包含我的脚本。下面是折线图的脚本

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("#chartData")
.append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Get the data
function updateDataA() {

d3.csv("data/dataA.csv", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);



// Add the valueline path.
svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));

// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

});
}


// ** Update data section (Called from the onclick)
function updateDataB() {
// Get the data again
d3.csv("data/dataB.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

 // Select the section we want to apply our changes to
 var svg = d3.select("#chartData").transition();

// Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);

  });
}


function updateDataC() {
// Get the data again
d3.csv("data/dataA.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Select the section we want to apply our changes to
var svg = d3.select("#chartData").transition();

// Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);

    });
}



function updateDataD() {
// Get the data again
d3.csv("data/dataB.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Select the section we want to apply our changes to
var svg = d3.select("#chartData").transition();

// Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);

    });
}

下面是我加载新脚本的函数。我用的是滑块。当滑块前进到适当的ui.value时，它将触发具有适当csv数据集的函数

 function handleSliderChange(event, ui){
     if(ui.value == 0 ){

                updateDataA();

            $( ".labelstyle2a" ).filter(function( index ) {return index == 0;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 1;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 2;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 3;}).css( "fill", 'white');



}
    if(ui.value == 1){

        updateDataB();

            $( ".labelstyle2a" ).filter(function( index ) {return index == 0;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 1;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 2;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 3;}).css( "fill", 'orange');


}
    if(ui.value== 2){

            updateDataC();

            $( ".labelstyle2a" ).filter(function( index ) {return index == 0;}).css( "fill", 'red');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 1;}).css( "fill", 'green');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 2;}).css( "fill", 'yellow');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 3;}).css( "fill", 'orange');



}
    if(ui.value== 3){

        updateDataD();

            $( ".labelstyle2a" ).filter(function( index ) {return index == 0;}).css( "stroke", 'grey');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 0;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 1;}).css( "fill", 'white');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 2;}).css( "fill", 'yellow');
            $( ".labelstyle2a" ).filter(function( index ) {return index == 3;}).css( "fill", 'orange');



} 

---

我使用了一组4个按钮，但这应该不是问题所在

每次调用

updateDataA（）

时，都会向

svg

添加新内容。在其他更新函数中，您选择所有

.line

和axis，并希望仅使用一个数据集更新它们

在第一次调用updateData（）时，我已经删除了所有重复的代码并初始化了图形

---

谢谢，我有个问题。我是否在按钮函数中添加了下面的脚本和下面您编写的脚本？请解释“url”部分。if（d3.select（“.topg”）.selectAll（“.line”）.empty（）{var svg=d3.select（“.topg”）；//添加valueline path.svg.append（“path”）.attr（“class”，“line”）.attr（“d”，valueline（data））；效果很好！谢谢。请忽略我之前的评论。起初我没有领会，但当我将您的代码放置到位时，所有这些都合在一起并有意义。我非常感谢您的帮助，并且浏览器没有崩溃。我将选择支票作为答案。再次感谢！

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("#chartData")
.append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.append("g")
    .attr("class", "topg")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

updateDataA();

function updateDataA() { updateData("data/dataA.csv"); }
function updateDataB() { updateData("data/dataB.csv"); }
function updateDataC() { updateData("data/dataC.csv"); }
function updateDataD() { updateData("data/dataD.csv"); }

function updateData(url) {
    d3.csv(url, function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    if (d3.select(".topg").selectAll(".line").empty()) {
        var svg = d3.select(".topg");
        // Add the valueline path.
        svg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data));

        // Add the X Axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        // Add the Y Axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
        return; // no transition to do
    }

    // Select the section we want to apply our changes to
    var svg = d3.select("#chartData").transition();

    // Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);
    });
}