Question

我是d3.js图表库的新手。我在使图表可滚动到大型x域时遇到问题。我尝试按照v3条形图示例对 zoom 进行重新缩放，转换事件，但在v5中无法正常工作。下面是我的简单条形图代码。

   <!DOCTYPE html>
<html>

<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <style>
        path {
            fill: none;
            stroke: rgb(75, 229, 247);
            stroke-width: 3px;
        }

        .x-axis path {
            stroke: #000000;
            stroke-opacity: 0.9;
        }

        .tick line {
            visibility: hidden;
        }

        .y-axis path {
            stroke: #000000;
            stroke-opacity: 0.9;

        }

        .zoom {
            cursor: move;
            fill: none;
            pointer-events: all;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let margin = {
            left: 100,
            right: 10,
            bottom: 100,
            top: 100
        };

        let width = 700 - margin.left - margin.right;

        let height = 600 - margin.top - margin.bottom;

        d3.csv("data.csv").then(function (dataSet) {
            dataSet.forEach(function (d) {
                d.age = +(d.age);
                d.value = +(d.value);

            });

            let x = d3.scaleBand()
                .domain(
                    dataSet.map(function (d) {
                        return d.name;
                    }))
                .rangeRound([0, width], .5)
                .paddingInner(0.9)
                .paddingOuter(0.5);

            let y = d3.scaleLinear()
                .domain([0, d3.max(dataSet, function (d) {
                    return d.age;
                })])
                .range([height, 0]);

            let yAxis = d3.axisLeft(y);
            let xAxis = d3.axisBottom(x);

            var svg = d3.select("div").append("svg")
                .attr("width", 400 + margin.left + margin.right)
                .attr("height", 500 + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            let rect = svg.selectAll("rect")
                .data(dataSet)
                .enter()
                .append("rect")
                .attr("y", function (d) {
                    return y(d.age);
                })
                .attr("x", function (d) {
                    return x(d.name);
                })
                .attr("width", x.bandwidth)
                .attr("height", function (d) {
                    return height - y(d.age) + 2;
                })
                .attr("fill", "rgb(75, 82, 227)")
                .attr("rx", 4);

            let gX = svg.append("g")
                .attr("class", "x-axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);


            let gY = svg.append("g")
                .attr("class", "y-axis")
                .call(yAxis);



        });
    </script>
</body>

</html>

下面是csv

name,age,value
JAN,199,100
OCT,154,75
SEPT,143,55
MAY,132,35
FEB,111,15
MARCH,100,23
JUNE,43,88
APRIL,89,43
AUG,94,66
JUL,122,19
DEC,76,98
NOV,45,33

我只需要使x轴可滚动而不是y。注意：我正在使用d3.js版本5。

如何使用版本5中的缩放使d3.js中的x轴可滚动。

0 个答案: