如何更改d3.js中的json文件並使用選項更新圖表

Question

我正在學習JavaScript到d3.js。

我想改變json文件使用選擇選項爲了更新d3圖表。

我所做的：

1. 我創建了一個d3.js圖。
2. 我將選項添加到select id。
3. 我加var v = this.value;從options到d3.json

我改變數據集的結果，但它寫入x和y axis+bars連連。

d3.json("jsonFile_1.json", function(err, data) { 
    createVis(data); 
}); 

function createVis(json) { 

    var n = 3, // number of layers 
     m = json.length, // number of samples per layer 
     data = d3.layout.stack()([ 
      json.map(function(d, i) { 
       return { 
        x: i, 
        y: parseInt(d.aspersion), 
        date: d.date 
       }; 
      }), 
      json.map(function(d, i) { 
       return { 
        x: i, 
        y: parseInt(d.manual), 
        date: d.date 
       }; 
      }), 
      json.map(function(d, i) { 
       return { 
        x: i, 
        y: parseInt(d.cultivo), 
        date: d.date 
       }; 
      }) 
     ]); 

    var p = 20, 
     w = 660 - 2.5 * p, 
     h = 425 - .5 * p, 
     mx = m, 
     my = d3.max(data, function(d) { 
      return d3.max(d, function(d) { 
       return d.y0 + d.y; 
      }); 
     }), 
     x = function(d) { 
      return d.x * w/mx; 
     }, 
     y0 = function(d) { 
      return h - d.y0 * h/my; 
     }, 
     y1 = function(d) { 
      return h - (d.y + d.y0) * h/my; 
     }, 
     y2 = function(d) { 
      return d.y * h/my; 
     }, 
     format = d3.format(","); 

    var x_range = d3.scale.linear().domain([0, data[0].length - 1]).range([10, w - 40]); 

    var vis = d3.select('#chartviz') 
     .append('svg') 
     .attr("width", w + 2.5 * p) 
     .attr("height", h + p); 

    var layers = vis.selectAll('g.layer') 
     .data(data) 
     .enter() 
     .append('g') 
     .style("fill", function(d, i) { 
      return color(i); 
     }) 
     .attr("class", "layer"); 

    var bars = layers.selectAll("g.bar") 
     .data(function(d) { 
      return d; 
     }) 
     .enter() 
     .append("g") 
     .attr("class", "bar") 
     .attr("transform", function(d) { 
      return "translate(" + x(d) + ")"; 
     }); 

    var xAxis = d3.svg.axis().scale(x_range) 
     .ticks(17); 

    var y_range = d3.scale.linear() 
     .domain([0, yStackMax]) 
     .range([h, 0]); 

    var yAxis = d3.svg.axis().scale(y_range) 
     .ticks(7) 
     .orient('right'); 

    vis.selectAll('g.bar').append('rect') 
     .attr("x", function(d, i) { 
      return x({ 
       x: .9 * ~~(i/m)/n 
      }); 
     }) 
     .attr("width", x({ 
      x: .9/n 
     })) 
     .attr("y", h) 
     .attr("height", 0) 
     .transition() 
     .delay(function(d, i) { 
      return i * 10; 
     }) 
     .attr("y", function(d) { 
      return h - y2(d); 
     }) 
     .attr("height", y2); 

    vis.append('svg:g') 
     .attr('class', 'x axis') 
     .attr("transform", "translate(10," + h + ")") 
     .call(xAxis); 

    vis.append('svg:g') 
     .attr('class', 'y axis') 
     .attr("transform", "translate(" + w + ",0)") 
     .call(yAxis); 

    // Create Legends 
    vis.append("rect") 
     .attr('class', 'chartviz-legend-1') 
     .attr("width", 10) 
     .attr("height", 10); 

    vis.append("text") 
     .attr("x", 20) 
     .attr("dy", ".9em") 
     .text("Legend 1"); 

    vis.append("line") 
     .attr("x1", 0) 
     .attr("x2", w - x({ 
      x: .1 
     })) 
     .attr("y1", h) 
     .attr("y2", h); 

然後我說的過渡按鈕，從組圖表到堆圖表。

window.transitionGroup = function() { 
    d3.select("#button-group").style("display", "none"); 
    d3.select("#button-stack").style("display", null); 

    var group = d3.selectAll("#chartviz"); 

    group.selectAll("g.layer rect") 
     .transition() 
     .duration(500) 
     .delay(function(d, i) { 
      return (i % m) * 10; 
     }) 
     .attr("x", function(d, i) { 
      return x({ 
       x: .9 * ~~(i/m)/n 
      }); 
     }) 
     .attr("width", x({ 
      x: .9/n 
     })) 
     .each("end", transitionEnd); 

    function transitionEnd() { 
     d3.select(this) 
      .transition() 
      .duration(500) 
      .attr("y", function(d) { 
       return h - y2(d); 
      }) 
      .attr("height", y2); 
    } 
} 

window.transitionStack = function() { 
    d3.select("#button-stack").style("display", "none"); 
    d3.select("#button-group").style("display", null); 

    var stack = d3.select("#chartviz"); 

    stack.selectAll("g.layer rect") 
     .transition() 
     .duration(500) 
     .delay(function(d, i) { 
      return (i % m) * 10; 
     }) 
     .attr("y", y1) 
     .attr("height", function(d) { 
      return y0(d) - y1(d); 
     }) 
     .each("end", transitionEnd); 

    function transitionEnd() { 
     d3.select(this) 
      .transition() 
      .duration(500) 
      .attr("x", 0) 
      .attr("width", x({ 
       x: .9 
      })); 
    } 
} 

我添加的選項，選擇標籤後，這是我想爲了做改變JSON文件：

$('#selectOptions').change(function() { 
    var v = this.value; 
    var jsondata = 'jsondata/' + v + '.json'; 
    console.log(jsondata); 
    if (window.location.hash === '') { 
     d3.json(jsondata, function(err, data) { 
      createVis(data); 
     }); 
    }; 
}); 

它的工作原理，它改變了JSON文件，但它改寫x和y axis ，legend和bars每次選擇一個新選項。

我該如何改進這個腳本。

任何建議表示讚賞！謝謝！

Answer 1

的creaeVis函數裏面添加這一行：

d3.select('#chartviz').select("svg").remove(); 

//generate the svg 
var vis = d3.select('#chartviz') 
    .append('svg') 
    .attr("width", w + 2.5 * p) 
    .attr("height", h + p); 

這將確保你只有一個SVG所有的時間，以前你每次選擇被改變時附加的SVG。

Answer 2

下面的方法可能適用於您的應用程序。

• 使用AJAX調用
• JSON數據傳遞給該函數來呈現圖表
• 創建圖形與新的一組JSON數據的每個時間閱讀來自http響應的數據。

使用Ajax調用作爲飼養的圖形

functional approach d3.v4 bar chart