d3.js條形圖中具有恆定條寬的動態數據

Question

我需要在我的網站上放置一個d3條形圖。 那里的數據來自服務器。 數據可能非常大或者也可能很小。 我已經提到了下面的代碼。

當數據動態增加時 ，如何自動添加滾動條而不是減小條的寬度？

同樣，如果數據較少，則條形大小應保持不變。

 // Setup svg using Bostock's margin convention var margin = {top: 20, right: 160, bottom: 35, left: 30}; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("body") .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 + ")"); /* Data in strings like it would be if imported from a csv */ var data = [ { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" }, { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "4" }, { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" }, { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" }, { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" }, { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" }, { year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" }, { year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" }, { year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" }, { year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" }, { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" }, { year: "2017", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" }, { year: "2018", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" }, ]; var parse = d3.time.format("%Y").parse; // Transpose the data into layers var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) { return data.map(function(d) { return {x: parse(d.year), y: +d[fruit]}; }); })); // Set x, y and colors var x = d3.scale.ordinal() .domain(dataset[0].map(function(d) { return dx; })) .rangeRoundBands([10, width-10], 0.02); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + dy; }); })]) .range([height, 0]); var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"]; // Define and draw axes var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width, 0, 0) .tickFormat( function(d) { return d } ); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%Y")); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Create groups for each series, rects for each segment var groups = svg.selectAll("g.cost") .data(dataset) .enter().append("g") .attr("class", "cost") .style("fill", function(d, i) { return colors[i]; }); var rect = groups.selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", function(d) { return x(dx); }) .attr("y", function(d) { return y(d.y0 + dy); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + dy); }) .attr("width", x.rangeBand()) .on("mouseover", function() { tooltip.style("display", null); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .on("mousemove", function(d) { var xPosition = d3.mouse(this)[0] - 15; var yPosition = d3.mouse(this)[1] - 25; tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); tooltip.select("text").text(dy); }); // Draw legend var legend = svg.selectAll(".legend") .data(colors) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d, i) {return colors.slice().reverse()[i];}); legend.append("text") .attr("x", width + 5) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d, i) { switch (i) { case 0: return "Anjou pears"; case 1: return "Naval oranges"; case 2: return "McIntosh apples"; case 3: return "Red Delicious apples"; } }); // Prep the tooltip bits, initial display is hidden var tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("width", 30) .attr("height", 20) .attr("fill", "white") .style("opacity", 0.5); tooltip.append("text") .attr("x", 15) .attr("dy", "1.2em") .style("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold"); 

  svg { font: 10px sans-serif; shape-rendering: crispEdges; } .axis path, .axis line { fill: none; stroke: #000; } path.domain { stroke: none; } .y .tick line { stroke: #ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>d3.js learning</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> </body> </html> 

Answer 1

我創建了一個div具有固定width和height ，並讓在div有沿滾動x 。 將圖表svg附加到div並根據數據長度調整圖表width 。

這是一個小提琴。 嘗試在其中添加或刪除數據點。

 // Setup svg using Bostock's margin convention var margin = { top: 20, right: 160, bottom: 35, left: 30 }; var width,height = 300 - margin.top - margin.bottom; var data = [ { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" } ]; //Calculate width based on the number of data points and multiply by 60 to give sufficient width to the bars. width = (data.length * 60) - margin.left - margin.right; // If calculated width is lesser than the div container width, set a minimum width of 700px if (width < $('#chartContainer').width()) { width = 700 - margin.left - margin.right; } var svg = d3.select("#chartContainer") .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 + ")"); /* Data in strings like it would be if imported from a csv */ var parse = d3.time.format("%Y").parse; // Transpose the data into layers var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) { return data.map(function(d) { return { x: parse(d.year), y: +d[fruit] }; }); })); // Set x, y and colors var x = d3.scale.ordinal() .domain(dataset[0].map(function(d) { return dx; })) .rangeRoundBands([10, width - 10], 0.8/data.length); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + dy; }); })]) .range([height, 0]); var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"]; // Define and draw axes var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width, 0, 0) .tickFormat(function(d) { return d }); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%Y")); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) //.selectAll('text'); // Create groups for each series, rects for each segment var groups = svg.selectAll("g.cost") .data(dataset) .enter().append("g") .attr("class", "cost") .style("fill", function(d, i) { return colors[i]; }); var rect = groups.selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", function(d) { return x(dx); }) .attr("y", function(d) { return y(d.y0 + dy); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + dy); }) .attr("width", x.rangeBand()) .on("mouseover", function() { tooltip.style("display", null); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .on("mousemove", function(d) { var xPosition = d3.mouse(this)[0] - 15; var yPosition = d3.mouse(this)[1] - 25; tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); tooltip.select("text").text(dy); }); // Draw legend var legend = svg.selectAll(".legend") .data(colors) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", function(d, i) { return colors.slice().reverse()[i]; }); legend.append("text") .attr("x", width + 5) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d, i) { switch (i) { case 0: return "Anjou pears"; case 1: return "Naval oranges"; case 2: return "McIntosh apples"; case 3: return "Red Delicious apples"; } }); // Prep the tooltip bits, initial display is hidden var tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("width", 30) .attr("height", 20) .attr("fill", "white") .style("opacity", 0.5); tooltip.append("text") .attr("x", 15) .attr("dy", "1.2em") .style("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold"); 

 svg { font: 10px sans-serif; shape-rendering: crispEdges; } .axis path, .axis line { fill: none; stroke: #000; } path.domain { stroke: none; } .y .tick line { stroke: #ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>d3.js learning</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <div id='chartContainer' style="overflow-x:scroll;max-width: 400px;height:330px"></div> </body> </html>