Question

我正在使用d3js从.csv文件构建条形图，并且由于我的编程知识不好，我从网络上获得了一个示例并开始使用。可以从中获得特定的值。 csv并绘制图表，但我想实现一个下拉列表以从.csv中选择特定值，如下图所示。

我无法从.csv加载此数据。它似乎并不复杂，但是我以某种方式进行了尝试，但没有成功。有人可以给我有关如何执行此操作的提示吗？

最诚挚的问候！

.csv文件

country,year,hdi,gdp,unemp
Australia,2000,45,5.6,9
Austria,2000,54,6.1,8
Canada,2000,23,4.5,6
...
...

HTML + JS

    <html>
        <head>
        <style>
            .bar {
              fill: steelblue;
            }

            .bar:hover {
              fill: brown;
            }
        </style>
        <script src="//d3js.org/d3.v5.min.js"></script>
        </head>
        <body>
        <div>
        <select id="S_indicators"></select> 
        </div>

        <svg width="560" height="300"></svg>

        <script>

        var svg = d3.select("svg"),
        margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 50
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var parseTime = d3.timeParse("%d-%b-%y");

        var x = d3.scaleBand()
            .rangeRound([0, width])
            .padding(0.1);

        var y = d3.scaleLinear()
            .rangeRound([height, 0]);   

        d3.csv("output.csv").then(function (data) {

            var allGroup = ["gdp","hdi","unemp"]    

            d3.select("#S_indicators")
              .selectAll('myOptions')
                .data(allGroup)
              .enter()
                .append('option')
              .text(function (d) { return d; }) 
              .attr("value", function (d) { return d; })

            x.domain(data.map(function (d) {
                    return d.year;
                }));
            y.domain([0, d3.max(data, function (d) {
                        return Math.max(d.unemp);
                    })]);               

            g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))

            g.append("g")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("fill", "#000")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")

            g.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) {
                return x(d.year);
            })
            .attr("y", function (d) {
                return y(Number(d.unemp));
            })
            .attr("width", x.bandwidth())
            .attr("height", function (d) {
                return height - y(Number(d.unemp));
            });
        });
        </script>
        </body>
        </html>

Answer 1

-向html文件添加一个下拉列表（我将其命名为dd）：

<!DOCTYPE html>
<html lang="en">
    <title>My Scatter2</title>
    <body>
        <select id="dd"></select>
        <div id="wrap"></div>
        <script src="https://d3js.org/d3.v5.js"></script>
        <script src="scatterplot.js"></script>
        <link rel='stylesheet' href='styles.css'>
    </body>
</html>

通过以下方式将其填充到D3中：

  var specs = ['A','B','C']
  var dropdown = d3.select('#dd')
  dropdown.selectAll('option')
    .data(specs)
    .enter().append("option")
    .attr("value",d=>d)
    .text(d => d)

或者如果您想要一个可观察的示例： https://observablehq.com/@kickout/basic-scatterplot

D3js：条形图中的下拉菜单更新

1 个答案: