单击按钮更新折线图

Question

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



} 

Answer 1

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

每次您拨打updateDataA() 时，您都会向svg 添加新内容。在其他更新函数中，您选择所有 .lines 和轴，并希望仅使用一个数据集更新它们。

我已删除所有重复代码并在第一次调用 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);
    });
}