d3.js – 使用d3.scalePoint()缩放

2023年10月25日 369次阅读

所以我修改了这个例子,以便我可以在xAxis上使用scalePoint(而不是scaleLinear,我也改变了代码,这样你只能放大xAxis,我不关心yAxis缩放)：

https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

一切似乎都在工作,除了缩放,我得到一个未定义的不是这一行上的函数错误：gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));

有关如何使用scalePoint进行缩放工作的任何想法？

这是代码：

    

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        text {
            fill: black;
        }

        rect {
            fill: steelblue;
        }

        path.chart__line {
            fill: green;
            opacity: .3;
            stroke: green;
            stroke-width: 1.5px;
        }
    </style>
    <svg id="my-svg" width="960" height="500">
        <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0.0%" stop-color="#2c7bb6"></stop>
                <stop offset="12.5%" stop-color="#00a6ca"></stop>
                <stop offset="25.0%" stop-color="#00ccbc"></stop>
                <stop offset="37.5%" stop-color="#90eb9d"></stop>
                <stop offset="50.0%" stop-color="#ffff8c"></stop>
                <stop offset="62.5%" stop-color="#f9d057"></stop>
                <stop offset="75.0%" stop-color="#f29e2e"></stop>
                <stop offset="87.5%" stop-color="#e76818"></stop>
                <stop offset="100.0%" stop-color="#d7191c"></stop>
            </linearGradient>
        </defs>
    </svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        let xDomain = ['A', 'B', 'C'];

        let zoomed = () => {
            view.attr("transform", d3.event.transform);
            gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
            // gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis
        };

        let resetted = () => {
            svg.transition()
                .duration(750)
                .call(zoom.transform, d3.zoomIdentity);
        };

        let svg = d3.select("#my-svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");

        let zoom = d3.zoom()
            .scaleExtent([1, 40])
            .translateExtent([[0, 0], [width, height]])
            .on("zoom", zoomed);

        let x = d3.scalePoint()
            .domain(xDomain)
            .range([0, width]);

        let y = d3.scaleLinear()
            .domain([0, height])
            .range([0, height]);

        let xAxis = d3.axisBottom(x)
            .ticks(xDomain.length)
            .tickSize(height)
            .tickPadding(8 - height);

        let yAxis = d3.axisRight(y)
            .ticks(10)
            .tickSize(width)
            .tickPadding(8 - width);

        let view = svg.append("rect")
            .attr("class", "view")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height);

        let gX = svg.append("g")
            .attr("class", "axis axis--x")
            .call(xAxis);

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

        d3.select("button")
            .on("click", resetted);

        svg.call(zoom);
    </script>
</body>

</html>

感谢您的时间.

最佳答案 如果要使用transformX函数,则需要使用
continuous scale.它使用刻度的反转功能,只有连续刻度才能提供.

虽然你提到你不想使用scaleLinear我测试了它,它似乎工作正常. (我必须启用y缩放来测试这个)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <style>
    text {
      fill: black;
    }
    
    rect {
      fill: steelblue;
    }
    
    path.chart__line {
      fill: green;
      opacity: .3;
      stroke: green;
      stroke-width: 1.5px;
    }
  </style>
  <svg id="my-svg" width="960" height="500">
        <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0.0%" stop-color="#2c7bb6"></stop>
                <stop offset="12.5%" stop-color="#00a6ca"></stop>
                <stop offset="25.0%" stop-color="#00ccbc"></stop>
                <stop offset="37.5%" stop-color="#90eb9d"></stop>
                <stop offset="50.0%" stop-color="#ffff8c"></stop>
                <stop offset="62.5%" stop-color="#f9d057"></stop>
                <stop offset="75.0%" stop-color="#f29e2e"></stop>
                <stop offset="87.5%" stop-color="#e76818"></stop>
                <stop offset="100.0%" stop-color="#d7191c"></stop>
            </linearGradient>
        </defs>
    </svg>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script>
    let xDomain = ['A', 'B', 'C'];

    let zoomed = () => {
      view.attr("transform", d3.event.transform);
      gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
      gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis
    };

    let resetted = () => {
      svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity);
    };

    let svg = d3.select("#my-svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

    let zoom = d3.zoom()
      .scaleExtent([1, 40])
      .translateExtent([
        [0, 0],
        [width, height]
      ])
      .on("zoom", zoomed);

    let x = d3.scaleLinear()
      .domain(xDomain)
      .range([0, width]);

    let y = d3.scaleLinear()
      .domain([0, height])
      .range([0, height]);

    let xAxis = d3.axisBottom(x)
      .ticks(xDomain.length)
      .tickSize(height)
      .tickPadding(8 - height);

    let yAxis = d3.axisRight(y)
      .ticks(10)
      .tickSize(width)
      .tickPadding(8 - width);

    let view = svg.append("rect")
      .attr("class", "view")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height);

    let gX = svg.append("g")
      .attr("class", "axis axis--x")
      .call(xAxis);

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

    d3.select("button")
      .on("click", resetted);

    svg.call(zoom);
  </script>
</body>

</html>
点赞