D3js圖表響應
[英]D3js charts reponsive
問題描述
我正在嘗試獲取響應式d3js圖表。 我已將圖表的寬度和高度設置為100％，並具有調整大小的功能，該功能應減小size。 到目前為止，我所做的只是設法減少了x軸上的標簽，但折線圖仍保持相同的大小。這是我嘗試使響應方式正確的方式，或者是它們的更好方式任何d3js圖表（條形/餅形/線形）都可以做出響應。
var margin = { top: 30, right: 20, bottom: 30, left: 50 }; var width = parseInt(d3.select("#chart").style("width")) - margin.left - margin.right, height = parseInt(d3.select("#chart").style("height")) - 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").ticks(5).tickFormat(function (d) { return d.replace('SEASONAL_', ''); });; var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); var valueline = d3.svg.line() .x(function (d) { return x(d.name); }) .y(function (d) { return y(d.count); }); 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 + ")"); // Get the data var all = [{ "name": "Seasonal Pop", "code": "SEASONAL_POP", "children": [{ "name": "SEASONAL_LYQ1", "code": "SEASONAL_LYQ1", "count": 1200 }, { "name": "SEASONAL_LYQ2", "code": "SEASONAL_LYQ2", "count": 2000 }, { "name": "SEASONAL_LYQ3", "code": "SEASONAL_LYQ3", "count": 1060 }, { "name": "SEASONAL_LYQ4", "code": "SEASONAL_LYQ4", "count": 2300 }, { "name": "SEASONAL_CYQ1", "code": "SEASONAL_CYQ1", "count": 1300 }, { "name": "SEASONAL_CYQ2", "code": "SEASONAL_CYQ2", "count": 3400 }, { "name": "SEASONAL_CYQ3", "code": "SEASONAL_CYQ3", "count": 4500 }, { "name": "SEASONAL_CYQ4", "code": "SEASONAL_CYQ4", "count": 5500 }] }]; var data = all[0].children; data.forEach(function (d) { // d.name = +d.date ; d.count = +d.count; }); // Scale the range of the data x.domain(data.map(function (d) { return d.name; })); y.domain([0, d3.max(data, function (d) { return d.count; })]); svg.append("path") // Add the valueline path. .attr("d", valueline(data)); svg.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); // Define responsive behavior function resize() { var width = parseInt(d3.select("#chart").style("width")) - margin.left - margin.right, height = parseInt(d3.select("#chart").style("height")) - margin.top - margin.bottom; // Update the range of the scale with new width/height x.range([0, width]); y.range([height, 0]); // Update the axis and text with the new scale svg.select('.x.axis') .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.select('.y.axis') .call(yAxis); // Force D3 to recalculate and update the line svg.selectAll('.line') .attr("d", function(d) { return line(d.count); }); // Update the tick marks xAxis.ticks(Math.max(width/75, 2)); yAxis.ticks(Math.max(height/50, 2)); }; // Call the resize function whenever a resize event occurs d3.select(window).on('resize', resize); // Call the resize function resize();
body { font: 12px Arial; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } #chart { width: 100%; height: 100%; position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body><svg id="chart"></svg></body>
1 個解決方案
解決方案1
1 已采納 2018-05-29 09:00:37
好吧，您的代碼還行得通。 除非您要處理兩個SVG。 在頁面上ID為“ chart”的頁面，並附加了該頁面。
var svg = d3.select("body")
.append("svg")
但是，這並不是D3問題，更多與響應式SVG有關。 響應式圖表在縮放方面存在問題。 X＆Y軸可能會顯示錯誤。
一種方法是縮放整個Chart / SVG。 忘記監聽窗口大小調整事件。 只需在主svg上設置viewBox屬性即可。 並設置靜態寬度高，也就是您聊天的正確比例。
var svg = d3.select("#chart")
.attr("viewBox", "0 0 " + viewWidth + " " + viewHeight)
例
var margin = { top: 30, right: 20, bottom: 30, left: 50 }; var width = 500 - margin.left - margin.right, height = 240 - 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").ticks(5).tickFormat(function (d) { return d.replace('SEASONAL_', ''); });; var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); var valueline = d3.svg.line() .x(function (d) { return x(d.name); }) .y(function (d) { return y(d.count); }); var viewWidth = width - margin.left - margin.right; var viewHeight = height + margin.top + margin.bottom; var svg = d3.select("#chart") .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight) // Get the data var all = [{ "name": "Seasonal Pop", "code": "SEASONAL_POP", "children": [{ "name": "SEASONAL_LYQ1", "code": "SEASONAL_LYQ1", "count": 1200 }, { "name": "SEASONAL_LYQ2", "code": "SEASONAL_LYQ2", "count": 2000 }, { "name": "SEASONAL_LYQ3", "code": "SEASONAL_LYQ3", "count": 1060 }, { "name": "SEASONAL_LYQ4", "code": "SEASONAL_LYQ4", "count": 2300 }, { "name": "SEASONAL_CYQ1", "code": "SEASONAL_CYQ1", "count": 1300 }, { "name": "SEASONAL_CYQ2", "code": "SEASONAL_CYQ2", "count": 3400 }, { "name": "SEASONAL_CYQ3", "code": "SEASONAL_CYQ3", "count": 4500 }, { "name": "SEASONAL_CYQ4", "code": "SEASONAL_CYQ4", "count": 5500 }] }]; var data = all[0].children; data.forEach(function (d) { // d.name = +d.date ; d.count = +d.count; }); // Scale the range of the data x.domain(data.map(function (d) { return d.name; })); y.domain([0, d3.max(data, function (d) { return d.count; })]); svg.append("path") // Add the valueline path. .attr("d", valueline(data)); svg.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis);
body { font: 12px Arial; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } #chart { width: 100%; height: 100%; position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body><svg id="chart"></svg></body>
是否可以將D3js圖表轉換為xml？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.