使D3.js 2D图表具有响应性
Make D3.js 2D graph chart responsive
首先,我想明确一点,我确实浏览了stackoverflow中发布的以下链接:
在d3.js 中调整窗口大小时调整svg大小
以下是jsfiddle和代码的链接:https://jsfiddle.net/adityap16/d61gtadm/8/
代码-
var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 },
height = 200,
width = 800;
var color = "green";
var xaxis_param = "mytime";
var yaxis_param = "value"
var params1 = {margin:margin,height:height,width:width, color: color, xaxis_param:xaxis_param, yaxis_param :yaxis_param};
draw_graph(data,params1);
function draw_graph(data,params){
//Get the margin
var xaxis_param = params.xaxis_param;
var yaxis_param = params.yaxis_param;
var color_code = params.color;
var margin = params.margin;
var height = params.height - margin.top - margin.bottom,
width = params.width - margin.left - margin.right;
var x_extent = d3.extent(data, function(d){
return d[xaxis_param]});
var y_extent = d3.extent(data, function(d){
return d[yaxis_param]});
var x_scale = d3.time.scale()
.domain(x_extent)
.range([0,width]);
var y_scale = d3.scale.linear()
.domain([0,y_extent[1]])
.range([height,0]);
//Line
var lineGen = d3.svg.line()
.x(function (d) {
return x_scale(d[xaxis_param]);
})
.y(function (d) {
return y_scale(d[yaxis_param]);
});
var myChart = d3.select('body').append('svg')
.attr('class','my-chart')
.style('background', '#E7E0CB')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate('+ margin.left +', '+ margin.top +')');
myChart
.append('svg:path')
.datum(data)
.attr('class', 'line')
.attr("d",lineGen)
.attr('stroke', color_code)
.attr('stroke-width', 1)
.attr('fill', 'none');
var legend = myChart.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + 5 + "," + (height - 25) + ")")
legend.append("rect")
.style("fill", color_code)
.attr("width", 20)
.attr("height", 20);
legend.append("text")
.text(yaxis_param)
.attr("x", 25)
.attr("y", 12);
var vGuideScale = d3.scale.linear()
.domain([0,y_extent[1]])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(vGuideScale)
.orient('left')
.ticks(5)
var hAxis = d3.svg.axis()
.scale(x_scale)
.orient('bottom')
.ticks(d3.time.minute, 5);
myChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(hAxis);
myChart.append("g")
.attr("class", "y axis")
.call(vAxis)
}
投票最多的解决方案讨论了定义类并使其在css文件中响应。当我试图用这种方式定义它时,代码会返回一个"未定义宽度"错误。我认为这是因为轴和其他元素是根据可变宽度计算的。我能想出的唯一可行的解决方案是:
var screenWidth = window.innerWidth;
screenWidth = screenWidth - 0.5*screenWidth;
但在这之后,无论何时调整窗口大小,我都必须调用d3.select(window).on('resize',resize);并将我的代码放入resize()函数中。我是javascript和d3的新手,所以我可能在已经发布的解决方案中遗漏了一些东西。谢谢
我强烈推荐以下关于D3中构建响应式可视化主题的博客文章。它给出了一个很好的最终结果,并且相当优雅地将你从一个大的图一直带到一条闪闪发光的线。
我不想复制/粘贴文章中的大量代码,但为了确保这不是一个只有链接的答案,主要步骤是:
收听Window resize
事件:
d3.select(window).on('resize', function() {
});
抓取容器的高度/宽度
let width = parseInt(d3.select(container).style("width"));
let height= parseInt(d3.select(container).style("height"));
在任何比例上设置范围并重新渲染
xAxisScale.range([0, width]);
yAxisScale.range([height, 0]);
d3.select(".x-axis").attr("transform", "translate(" + [0, height] + ")").call(xAxis);
d3.select(".y-axis").call(yAxis);
如果需要火花线,则隐藏轴
if(width < 500 || height < 500) {
d3.select(".x-axis").style("display", "none");
d3.select(".y-axis").style("display", "none");
}
除此之外,你可以在你的火花线上添加一些额外的东西,比如文章中的乞求/结束值,也可以在点数远远超过你的宽度时,将数据重新采样到合理的分辨率。
相关文章:
- D3.js:将一个有响应的饼图放在其父分区的中心
- 响应式 d3 刷牙
- 如何在 D3 中使力布局图.js响应屏幕/浏览器大小
- 使D3.js 2D图表具有响应性
- 响应式 d3 图形的问题
- 在 d3 转换期间响应即时报价事件
- 使 D3 响应式:viewBox vs resize()
- 居中 D3 图表 + 增加响应能力
- 如何使图表上的 d3 标题响应式
- 使 d3.js 可视化布局响应的最佳方法是什么?
- 如何使D3折线图具有响应性
- d3:对一个类采取行动以响应一个事件
- D3.js图表响应行为
- 响应式d3漏斗
- 响应D3缩放行为
- 调整响应d3的大小功能
- 如何使用D3库制作响应式画布动画
- 响应式D3 js图表
- CSS和D3 -在FIREFOX中制作响应svg
- D3.js光栅范围无响应