gpt4 book ai didi

javascript - d3 根据高度更改条形图颜色

转载 作者:行者123 更新时间:2023-12-05 05:39:41 27 4
gpt4 key购买 nike

我创建了一个条形图,我可以通过鼠标拖动来扩展或减小每个条形的高度,它会根据拖动的值自动更改数据。我想改变颜色,当我扩展它的高度时,每个条形图都变得更红,当我降低它的高度时,每个条形图变得更绿。我怎样才能实现它?

<!DOCTYPE html>
<html>
<style>
.selection {
fill: steelblue;
fill-opacity: 1;
}

body {
width: 80%;
margin: auto;
}
</style>
<body >
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
var data = [
{ index: 0, value: 18 },
{ index: 1, value: 20 },
{ index: 2, value: 19 },
];

var widthY = 550,
heightY = 600,
delim = 4;

var scaleY = d3.scaleLinear().domain([0, 21]).rangeRound([heightY, 0]);

var x = d3.scaleLinear().domain([0, data.length]).rangeRound([0, widthY]);

var svgY = d3
.select("body")
.append("svg")
.attr("width", widthY)
.attr("height", heightY)
.attr("fill", "green")
.append("g");

var brushY = d3
.brushY()
.extent(function (d, i) {
return [
[x(i) + delim / 2, 0],
[x(i) + x(1) - delim / 2, heightY],
];
})
.on("brush", brushmoveY)
.on("end", brushendY);

var svgbrushY = svgY
.selectAll(".brush")
.data(data)
.enter()
.append("g")
.attr("class", "brush")
.append("g")
.call(brushY)
.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
});

svgbrushY
.append("text")
.attr("y", function (d) {
return scaleY(d.value) + 25;
})
.attr("x", function (d, i) {
return x(i) + x(0.5);
})
.attr("dx", "-.60em")
.attr("dy", -5)
.style("fill", "white")
.text(function (d) {
return d3.format(".2")(d.value);
});

function brushendY() {
if (!d3.event.sourceEvent) return;
if (d3.event.sourceEvent.type === "brush") return;
if (!d3.event.selection) {
svgbrushY.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
});
}
}

function brushmoveY() {
if (!d3.event.sourceEvent) return;
if (d3.event.sourceEvent.type === "brush") return;
if (!d3.event.selection) return;

var d0 = d3.event.selection.map(scaleY.invert);
var d = d3.select(this).select(".selection");

d.datum().value = d0[0];

update();
}

function update() {
svgbrushY
.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
})
.selectAll("text")
.attr("y", function (d) {
return scaleY(d.value) + 25;
})
.text(function (d) {
return d3.format(".2")(d.value);
});
}

</script>
</body>
</html>

最佳答案

首先我们需要一个秤:

 var color = d3.scaleLinear().domain(scaleY.domain()).range(["lightgreen","crimson"])

现在我们需要在更新函数中更新拖动条的颜色:

 svgbrushY.selectAll(".selection").style("fill", function(d) { return color(d.value); })   

这几乎让我们一路走到了尽头 - 但最初的颜色并不正确。画笔的创建打破了 .selection 矩形的数据绑定(bind):如果你登录

svgbrushY.selectAll(".selection").each(function(d) { console.log(d); })

您会注意到数据在被拖动之前没有 value 属性。所以我们可以自己添加它,并像我们在更新功能期间一样设置栏的样式:

   svgbrushY.select(".selection")
.datum(d=>d)
.style("fill", function(d) { return color(d.value); })

这应该给我们类似的东西:

<!DOCTYPE html>
<html>
<style>
.selection {
fill-opacity: 1;
}

body {
width: 80%;
margin: auto;
}
</style>
<body >
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
var data = [
{ index: 0, value: 18 },
{ index: 1, value: 20 },
{ index: 2, value: 19 },
];

var widthY = 550,
heightY = 200,
delim = 4;

var scaleY = d3.scaleLinear().domain([0, 21]).rangeRound([heightY, 0]);

var x = d3.scaleLinear().domain([0, data.length]).rangeRound([0, widthY]);

var color = d3.scaleLinear().domain(scaleY.domain()).range(["lightgreen","crimson"])

var svgY = d3
.select("body")
.append("svg")
.attr("width", widthY)
.attr("height", heightY)
.attr("fill", "green")
.append("g");

var brushY = d3
.brushY()
.extent(function (d, i) {
return [
[x(i) + delim / 2, 0],
[x(i) + x(1) - delim / 2, heightY],
];
})
.on("brush", brushmoveY)
.on("end", brushendY);

var svgbrushY = svgY
.selectAll(".brush")
.data(data)
.enter()
.append("g")
.attr("class", "brush")
.append("g")
.call(brushY)
.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
});

svgbrushY.select(".selection")
.datum(d=>d)
.style("fill", function(d) { return color(d.value); })


svgbrushY
.append("text")
.attr("y", function (d) {
return scaleY(d.value) + 25;
})
.attr("x", function (d, i) {
return x(i) + x(0.5);
})
.attr("dx", "-.60em")
.attr("dy", -5)
.style("fill", "white")
.text(function (d) {
return d3.format(".2")(d.value);
});

function brushendY() {
if (!d3.event.sourceEvent) return;
if (d3.event.sourceEvent.type === "brush") return;
if (!d3.event.selection) {
svgbrushY.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
});
}
}

function brushmoveY() {
if (!d3.event.sourceEvent) return;
if (d3.event.sourceEvent.type === "brush") return;
if (!d3.event.selection) return;

var d0 = d3.event.selection.map(scaleY.invert);
var d = d3.select(this).select(".selection");

d.datum().value = d0[0];

update();
}



function update() {
svgbrushY
.call(brushY.move, function (d) {
return [d.value, 0].map(scaleY);
})
.selectAll("text")
.attr("y", function (d) {
return scaleY(d.value) + 25;
})
.text(function (d) {
return d3.format(".2")(d.value);
});

svgbrushY.selectAll(".selection").style("fill", function(d) { return color(d.value); })
}

</script>
</body>
</html>

(为片段 View 缩小)

关于javascript - d3 根据高度更改条形图颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72624100/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com