gpt4 book ai didi

从下拉过滤器中选择新源时,JavaScript D3 条形图数据将不会更新

转载 作者:行者123 更新时间:2023-11-27 23:58:24 25 4
gpt4 key购买 nike

所以我对使用 JavaScript 在 D3 中构建可视化还很陌生,而且我似乎真的被这个问题困扰了。我有 4 个 csv 数据集,如下所示,我正在尝试构建一个带有下拉过滤器的条形图,允许用户选择他们想要使用的数据源。理想情况下,当用户选择 DataSet0.csv 或 DataSet1.csv 时,我希望条形图显示相应数据集中“Value1”字段中的值,当用户选择 DataSet2.csv 或 Dataset3.csv 时,我会希望用户在各自的数据集中查看“Value2”字段中的值。不过,最后一部分只是一个额外的好处,现在我真的需要弄清楚过滤器。我在下面发布了所有相关代码。当我在网络浏览器上运行它时,我可以从下拉菜单中选择一个初始数据集,它工作得很好。但是,当我从下拉菜单中选择另一个数据集时,它会与之前存在的图表重叠。感谢大家提前抽出时间来提供帮助!非常感谢!

DataSet0.csv

Letter,Value1,Value2
I,9968,8863
F,9938,9204
E,9875,8578
D,9859,9074
G,9856,9432
J,9778,9095
A,9729,8747
C,9695,8610
H,9609,8969
B,9508,9395

数据集1.csv

Letter,Value1,Value2
I,1510,1495
E,1521,1312
C,1624,1370
H,1669,1031
A,1685,1256
D,1773,1178
J,1910,1129
B,1981,1331
F,1982,1032
G,1986,1463

数据集2.csv

Letter,Value1,Value2
B,9516,9421
I,9537,9140
C,9772,9070
F,9527,9060
H,9747,8959
E,9992,8948
J,9576,8770
D,9748,8735
G,9963,8680
A,9557,8628

DataSet3.csv

Letter,Value1,Value2
I,1708,1016
H,1604,1096
G,1689,1106
D,1657,1115
F,1709,1131
C,1588,1221
A,1939,1309
J,1600,1332
B,1815,1344
E,1651,1478

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>

.bar {
fill: steelblue;
}

.bar:hover {
fill: brown;
}

.axis {
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.x.axis path {
display: none;
}

select {
position: absolute;
top: 10px
}

</style>
<body>
<select id="flter" name="flter" onchange="updateData(this.id)">
<option value=""></option>
<option value="DataSet0.csv">DataSet0</option>
<option value="DataSet1.csv">DataSet1</option>
<option value="DataSet2.csv">DataSet2</option>
<option value="DataSet3.csv">DataSet3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 60, right: 60, bottom: 90, left: 120},
width = 960 - margin.left - margin.right,
height = 700 - 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");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "$");

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 + ")");

d3.csv(fileName, type, function(error, data) {
if (error) throw error;

x.domain(data.map(function(d) { return d.Letter; }));
y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-15)" );

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value1");

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Value1); })
.attr("height", function(d) { return height - y(d.Value1); });
});

function updateData(s){
var s = document.getElementById(s);
var fileName = s.value;
d3.csv(fileName, type, function(error, data) {
if (error) throw error;

x.domain(data.map(function(d) { return d.Letter; }));
y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);



svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-15)" );

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value1");

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Value1); })
.attr("height", function(d) { return height - y(d.Value1); });
});
}

function type(d) {
d.Value1 = +d.Value1;
return d;
}
</script>
</body>
</html>

最佳答案

使用general update pattern (仔细研究链接示例的三个部分并思考一下。如果您想理解 d3,这一点很重要)...

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>

.bar {
fill: steelblue;
}

.bar:hover {
fill: brown;
}

.axis {
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.x.axis path {
display: none;
}

select {
position: absolute;
top: 10px
}

</style>
<body>
<select id="flter" name="flter" onchange="updateData(this.id)">
<option value=""></option>
<option value="DataSet0.csv">DataSet0</option>
<option value="DataSet1.csv">DataSet1</option>
<option value="DataSet2.csv">DataSet2</option>
<option value="DataSet3.csv">DataSet3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 60, right: 60, bottom: 90, left: 120},
width = 960 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom,
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 + ")");

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 0),
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"),
gX = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");

var y = d3.scale.linear()
.range([height, 0]),
yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "$"),
gY = svg.append("g")
.attr("class", "y axis");

function updateData(s){
var s = document.getElementById(s);

var fileName = s.value;

d3.csv(fileName, type, function(error, data) {
if (error) throw error;

x.domain(data.map(function(d) { return d.Letter; }));
y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);

gX.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-15)" );

gY.call(yAxis)
// only add title once
.selectAll(".title")
.data(["Value1"])
.enter().append("text").attr("class", "title")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function(d){
return d
});

// GENERAL UPDATE PATTERN
// UPDATE
var bars = svg.selectAll(".bar")
.data(data);
// ENTER
bars.enter().insert("rect", ".axis")
.attr("class", "bar");
// UPDATE+ENTER (calling enter() merges enter into update)
bars.attr("x", function(d) { return x(d.Letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Value1); })
.attr("height", function(d) { return height - y(d.Value1); });
// EXIT
bars.exit().remove();

});
function type(d) {
d.Value1 = +d.Value1;
return d;
}
}

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

关于从下拉过滤器中选择新源时,JavaScript D3 条形图数据将不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32062182/

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