D3.js條形圖不刷新

編輯：感謝我的圖表下面的musically_um現在「刷新」，但結果是酒吧盤旋在xaxis之上/之下。見下面的圖片：D3.js條形圖不刷新

頁面加載：從ACT PAGE LOAD all OK

命中客戶李四和圖表更改爲： enter image description here

的JSON數據頁面加載低於，看有沒有max_energy負數：

[{"xaxis":"6","max_energy":"98.019","max_efficiency":"25.797"},{"xaxis":"7","max_energy":"82.073","max_efficiency":"21.596"},{"xaxis":"8","max_energy":"9.503","max_efficiency":"2.503"},{"xaxis":"9","max_energy":"17.502","max_efficiency":"4.603"},... more data ...]

從ACT李四的JSON數據低於太多，看有沒有max_energy負數也：

[{"xaxis":"6","max_energy":"22.696","max_efficiency":"5.973"},{"xaxis":"7","max_energy":"23.250","max_efficiency":"6.118"},{"xaxis":"8","max_energy":"2.692","max_efficiency":"0.709"},{"xaxis":"9","max_energy":"4.958","max_efficiency":"1.304"},... more data ...]

爲什麼圖表像這樣刷新？頁面可以找到here if you have the time。謝謝！

原題：

5個圖表負載與從MySQL的服務器端腳本拉缺省數據頁面加載確定。

我在pge上有選擇器，用戶可以點擊一個，新的數據將加載到圖表中。這是一塊不起作用。

這裏是我的HTML

<svg id="daychart"></svg> 
<svg id="weekchart"></svg> 
<svg id="monthchart"></svg> 
<svg id="yearchart"></svg> 
<svg id="lifechart"></svg> 
<div id="P100023" onclick="MenuSelect(this.id);">P100023</div> 
<div id="C120036" onclick="MenuSelect(this.id);">C120036</div> 
<div id="C120031" onclick="MenuSelect(this.id);">C120031</div> 
<div id="C120048" onclick="MenuSelect(this.id);">C120048</div> 
<div id="C120033" onclick="MenuSelect(this.id);">C120033</div>

這裏是我的JS代碼：

jQuery(document).ready(function() { 
    CreateBarChart("/myphp/data.php?var=PDAY&id=P100023", "#daychart"); 
    CreateBarChart("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart"); 
    CreateBarChart("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart"); 
    CreateBarChart("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart"); 
    CreateBarChart("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart"); 
}); 

function CreateBarChart(url, divid) { 

    var margin = { 
     top: 20, 
     right: 0, 
     bottom: 30, 
     left: 30 
    }, 
    width = 838 - margin.left - margin.right, 
     height = 300 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

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

    var svg = d3.select(divid) 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    d3.json(url, function (error, data) { 
     data.forEach(function (d) { 
      d.max_energy = +d.max_energy; 
     }); 

     x.domain(data.map(function (d) { 
      return d.xaxis; 
     })); 
     y.domain([0, d3.max(data, function (d) { 
      return d.max_energy; 
     })]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .append("text") 
      .attr("transform", "rotate(0)") 
      .attr("y", 23) 
      .attr("x", 340) 
      .attr("dy", ".71em") 
      .style("text-anchor", "bottom") 
      .text("Time/Date/Month/Year"); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(0)") 
      .attr("y", -15) 
      .attr("x", -25) 
      .attr("dy", ".71em") 
      .style("text-anchor", "top") 
      .text("Energy - KWh"); 

     svg.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function (d) { 
      return x(d.xaxis); 
     }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function (d) { 
      return y(d.max_energy); 
     }) 
      .transition().delay(function (d, i) { 
      return i * 10; 
     }).duration(10) 
      .attr("height", function (d) { 
      return height - y(d.max_energy); 
     }); 

    }); 
}; 

function updateData(url, divid) { 

    var margin = { 
     top: 20, 
     right: 0, 
     bottom: 30, 
     left: 30 
    }, 
    width = 838 - margin.left - margin.right, 
     height = 300 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

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

    // Get the data again 
    d3.json(url, function (error, data) { 
     data.forEach(function (d) { 
      d.max_energy = +d.max_energy; 
     }); 

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

     var svg = d3.select(divid) 

     // Make the changes 
     svg.selectAll(".bar") // change the bar 
     .data(data) // Update the data within. 
     // No `.enter()` and `.exit()` phase. 
     .transition() 
      .duration(750) 
      .attr("x", function (d) { 
      return x(d.xaxis); 
     }) 
      .attr("y", function (d) { 
      return y(d.max_energy); 
     }); 

     svg.select(".x.axis") // change the x axis 
     .transition() 
      .duration(750) 
      .call(xAxis); 

     svg.select(".y.axis") // change the y axis 
     .transition() 
      .duration(750) 
      .call(yAxis); 
    }); 
} 

function MenuSelect(divid) { 

    switch (divid) { 
     case "P100023": 
      updateData("/myphp/data.php?var=PDAY&id=P100023", "#daychart"); 
      updateData("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart"); 
      updateData("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart"); 
      updateData("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart"); 
      updateData("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart"); 
      break; 
     case "C120036": 
      updateData("/myphp/data.php?var=CDAY&id=C120036", "#daychart"); 
      updateData("/myphp/data.php?var=CWEEK&id=C120036", "#weekchart"); 
      updateData("/myphp/data.php?var=CMONTH&id=C120036", "#monthchart"); 
      updateData("/myphp/data.php?var=CYEAR&id=C120036", "#yearchart"); 
      updateData("/myphp/data.php?var=CLIFE&id=C120036", "#lifechart"); 
      break; 
     case "C120031": 
      updateData("/myphp/data.php?var=CDAY&id=C120031", "#daychart"); 
      updateData("/myphp/data.php?var=CWEEK&id=C120031", "#weekchart"); 
      updateData("/myphp/data.php?var=CMONTH&id=C120031", "#monthchart"); 
      updateData("/myphp/data.php?var=CYEAR&id=C120031", "#yearchart"); 
      updateData("/myphp/data.php?var=CLIFE&id=C120031", "#lifechart"); 
      break; 
     case "C120048": 
      updateData("/myphp/data.php?var=CDAY&id=C120048", "#daychart"); 
      updateData("/myphp/data.php?var=CWEEK&id=C120048", "#weekchart"); 
      updateData("/myphp/data.php?var=CMONTH&id=C120048", "#monthchart"); 
      updateData("/myphp/data.php?var=CYEAR&id=C120048", "#yearchart"); 
      updateData("/myphp/data.php?var=CLIFE&id=C120048", "#lifechart"); 
      break; 
     case "C120033": 
      updateData("/myphp/data.php?var=CDAY&id=C120033", "#daychart"); 
      updateData("/myphp/data.php?var=CWEEK&id=C120033", "#weekchart"); 
      updateData("/myphp/data.php?var=CMONTH&id=C120033", "#monthchart"); 
      updateData("/myphp/data.php?var=CYEAR&id=C120033", "#yearchart"); 
      updateData("/myphp/data.php?var=CLIFE&id=C120033", "#lifechart"); 
      break; 
     default: 
    }; 
};

來源

2013-12-23 TheRealPapa

你沒有更新的選擇的data而隨時隨地更新圖形。試試這個：

// Select the section we want to apply our changes to 
    var svg = d3.select(divid) 

    // Make the changes 
    svg.selectAll(".bar") // change the bar 
    .data(data)   // Update the data within. 
          // No `.enter()` and `.exit()` phase. 
    .transition() 
    .duration(750) 
     .attr("x", function (d) { 
     return x(d.xaxis); 
    }) 
     .attr("y", function (d) { 
     return y(d.max_energy); 
    }); 

    svg.select(".x.axis") // change the x axis 
    .transition() 
    .duration(750) 
     .call(xAxis); 

    svg.select(".y.axis") // change the y axis 
    .transition() 
    .duration(750) 
     .call(yAxis);

來源

2013-12-23 06:07:49

嗨musically_ut。感謝您的建議。它現在正在過渡，但它正在搞亂條形圖佈局。看到我上面的編輯更多細節。我的頁面位於http://www.solarmonitoringaustralia.com.au/partner-portal/請從右邊的手風琴中選擇客戶以查看轉換。 – TheRealPapa

在佈局問題上，從圖片看起來好像是在更新條形的高度，而不是它們的y位置。由於SVG矩形的y位置始終爲矩形的top，所以在更改數據時也需要更改它。

有趣的是，在您最初發布的代碼中，您正在更新y位置，但不是高度。我接受你改變了嗎？無論哪種方式，這是你需要的：

// Make the changes 
svg.selectAll(".bar") // change the bar 
.data(data) // Update the data within. 
// No `.enter()` and `.exit()` phase. 
.transition() 
    .duration(750) 
    .attr("x", function (d) { 
    return x(d.xaxis); 
}) 
    .attr("y", function (d) { 
    return y(d.max_energy); 
}) 
    .attr("height", function (d) { 
    return height - y(d.max_energy); 
});

來源

2013-12-23 22:29:55 AmeliaBR

D3.js條形圖不刷新

回答

相關問題