我正在 d3 上尝试一些新的东西,但我不太理解这个概念。不幸的是,该代码也不起作用。
我想做的是 d3 绘制两个矩形,一个在屏幕的顶部,另一个在屏幕的底部。如果您查看_data
,您会发现y
的值是预定义的。
当数据输入时,使用初始计算的高度
,但是当窗口调整大小时,高度
值不会改变,从逻辑上讲,这不应该改变。但我需要更改 _data
中的 height
值。
创建矩形后,还需要添加其他功能,所以我不知道函数draw()中的
要么。 .data(_data).enter()...
如何
var width = window.innerWidth;
var height = window.innerHeight;
var svg = d3.select('body')
.append("svg")
.attr("height", height)
.attr("width", width);
var _data = {
{
"color": "yellow",
"y": 0
},
{
"color": "green".
"y": height - height / 5 //<- this data especially the hight value does not change .data(_data) on widow resize is there a way to change the data entered or at least the "y" value on window resize?
}
};
var rects = svg.selectAll('rect')
.data(_data) //<- This is where the problem is
.enter()
.append('rect')
.attr("fill", function(d, i) {
return d.color;
});
draw();
d3.select(window).on("resize", draw);
function draw() {
width = window.innerWidth;
svg.attr("width", width)
var xScale = d3.scale.ordinal()
.domain(_data)
.rangeBands([10, width - 10]);
rects.attr({
"x": function(d) {
return xScale(d);
},
"y": function(d) {
return d.y;
},
"width": xScale.rangeBand() * 0.95,
"height": 20
});
}
<script src="https://d3js.org/d3.v3.min.js"></script>
我清楚地看到我正在做的事情不起作用,非常感谢任何替代解决方案。
最佳答案
每次调用draw()时,您都需要计算数组中y的新值。
此外,我刚刚重构了 draw() 中的更新模式,并且在调整窗口大小时它更新了第二个矩形的 y 属性。
请参阅下面的代码和一个插件:https://embed.plnkr.co/iCczR7wlSwbO46JDMPr9/
完成后请将答案标记为正确!
var width = window.innerWidth;
var height = window.innerHeight;
var svg = d3.select('body')
.append("svg")
.attr("height", height)
.attr("width", width);
var _data = [];
draw();
d3.select(window).on("resize", draw);
function draw() {
calcData();
width = window.innerWidth;
svg.attr("width", width);
//add rects
var rects = svg.selectAll('rect')
.data(_data);
console.log(_data[1].y);
console.log(rects);
var xScale = d3.scale.ordinal()
.domain(_data)
.rangeBands([10, width - 10]);
rects.exit().remove();
rects.enter()
.append('rect')
.attr("fill", function(d, i) {
return d.color;
});
//update logic
rects.attr("x", function(d) {
return xScale(d);
})
.attr("y", function(d) {
console.log(d.color, d.y);
return d.y;
})
.attr("width", xScale.rangeBand() * 0.95)
.attr("height", 20);
}
function calcData(){
_data = [
{
"color": "yellow",
"y": 0
},
{
"color": "green",
"y": window.innerHeight - window.innerHeight / 5 //<- this data especially the hight value does not change .data(_data) on widow resize is there a way to change the data entered or at least the "y" value on window resize?
}
];
}
关于javascript - .data(...) 字段的 D3js 值在窗口大小调整时不会更改。有办法改变吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45066660/