单击按钮更新折线图

Question

我需要通过单击按钮来更新折线图。我找到了这个示例http://bl.ocks.org/d3noob/7030f35b72de721622b8，它很接近我的需要。我唯一的区别是，我需要一个按钮，如示例所示。我需要四个按钮。我按照提供的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');



} 

Answer 1

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

每次调用updateDataA()时，都会向svg添加新内容。在其他更新功能中，您选择了所有.line和轴，并希望仅使用一个数据集进行更新。

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

// 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);
    });
}