D3js：将 v3 升级到 v5

Question

我开始在 D3 javascript 中编码，我真的不太了解。 我在 Internet 上找到了一个非常好的示例，即使用下拉列表更新条形图，并开始研究并进行一两次修改。 这个例子在 D3 的第 3 版中，我想让它在第 5 版上运行。有人可以给我任何提示，告诉我我可以做些什么来使它在第 5 版中运行？

我将把代码放在下面，看看可以进行哪些更改。

此致！

<html>
    <head>
        <meta charset="utf-8">
        <title>Indicators</title>

     <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>   
     <!--  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> -->

        <style>
        body {
            font: 10px sans-serif;
        }
        select {
            display: block;
        }
        .bar {
            fill: blue;
            opacity: 0.8;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        </style>
    </head>

    <body>
        <div id='vis-container' align="right"></div>

        <script type="text/javascript">
            // Load and munge data, then make the visualization.
            var fileName = "./indicators.csv";
            var countries = ["Austria", "Canada", "Chile", "France", "Italy",
                                   "Poland", "Spain", "Sweden", "USA"];

            d3.csv(fileName, function(error, data) {
                var indicatorsMap = {};
                data.forEach(function(d) {
                    var indicator = d.indicator;
                    indicatorsMap[indicator] = [];

                    // { indicatorName: [ bar1Val, bar2Val, ... ] }
                    countries.forEach(function(field) {
                        indicatorsMap[indicator].push( +d[field] );
                    });
                });
                makeVis(indicatorsMap);
            });

            var makeVis = function(indicatorsMap) {
                // Define dimensions of vis
                var margin = { top: 30, right: 50, bottom: 30, left: 50 },
                    width  = 550 - margin.left - margin.right,
                    height = 250 - margin.top  - margin.bottom;

                // Make x scale
                var xScale = d3.scale.ordinal()
                    .domain(countries)
                    .rangeRoundBands([0, width], 0.1);

                // Make y scale, the domain will be defined on bar update
                var yScale = d3.scale.linear()
                    .range([height, 0]);

                // Create canvas
                var canvas = d3.select("#vis-container")
                  .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 + ")");

                // Make x-axis and add to canvas
                var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom");

                canvas.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                // Make y-axis and add to canvas
                var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left");

                var yAxisHandleForUpdate = canvas.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);

                yAxisHandleForUpdate.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Value");

                var updateBars = function(data) {
                    // First update the y-axis domain to match data
                    yScale.domain( d3.extent(data) );
                    yAxisHandleForUpdate.call(yAxis);

                    var bars = canvas.selectAll(".bar").data(data);

                    // Add bars for new data
                    bars.enter()
                      .append("rect")
                        .attr("class", "bar")
                        .attr("x", function(d,i) { return xScale( countries[i] ); })
                        .attr("width", xScale.rangeBand())
                        .attr("y", function(d,i) { return yScale(d); })
                        .attr("height", function(d,i) { return height - yScale(d); });

                    // Update old ones, already have x / width from before
                    bars
                        .transition().duration(250)
                        .attr("y", function(d,i) { return yScale(d); })
                        .attr("height", function(d,i) { return height - yScale(d); });

                    // Remove old ones
                    bars.exit().remove();
                };

                // Handler for dropdown value change
                var dropdownChange = function() {
                    var newIndicator = d3.select(this).property('value'),
                        newData   = indicatorsMap[newIndicator];

                    updateBars(newData);
                };

                // Get names of indicators, for dropdown
                var indicators = Object.keys(indicatorsMap).sort();

                var dropdown = d3.select("#vis-container")
                    .insert("select", "svg")
                    .on("change", dropdownChange);

                dropdown.selectAll("option")
                    .data(indicators)
                  .enter().append("option")
                    .attr("value", function (d) { return d; })
                    .text(function (d) {
                        return d[0].toUpperCase() + d.slice(1,d.length); // capitalize 1st letter
                    });

                var initialData = indicatorsMap[ indicators[0] ];
                updateBars(initialData);
            };
        </script>       
    </body>
</html>

Answer 1

v3 和 v5 之间有很多变化。 例如，d3.scale.linear 现在只是 d3.scaleLinear。 您可以查看 D3 的发行说明，但老实说，最好使用另一个使用 v5 创建的条形图作为模板。

d3.scale.linear 现在是 d3.scaleLinear d3.scale.ordingal 现在是 d3.scaleOrdinal

Axis 现在使用 d3.axisLeft 作为 y 轴，使用 d3.axisBottom 作为 x 轴。

D3js：将 v3 升级到 v5

问题描述

1 个解决方案

解决方案1
-2 2019-11-18 19:58:25

D3js：将 v3 升级到 v5

问题描述

1 个解决方案

解决方案1 -2 2019-11-18 19:58:25

解决方案1
-2 2019-11-18 19:58:25