使用折线图 d3 中的下拉菜单重新缩放 x 轴

Question

我正在尝试使用 dropdown 重新调整尖折线图中的 x 轴。

如果 x 轴值为 1,2,3,4 。从下拉列表中选择 0.5，然后生成的 x 轴应该像 0.5,1,1.5,2,2.5

从下拉列表中选择 1，然后生成的 x 轴应该像 1,2,3,4

选择 2 -> x 轴如 2,4,6,8,10

在代码中编辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  /* set the CSS */
  
  body {
    font: 12px Arial;
  }
  
  path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  
  div.tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 28px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    /*  pointer-events: none; This line needs to be removed */
  }
</style>

<body>

  <!-- load the d3.js library -->
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
  </script>
  <div>
    <select id="inds">
  <option value=2.5 selected="selected">0.5</option>
  <option value=5>1</option>
  <option value="10">2</option>
</select>
  </div>
  <script>
    // Set the dimensions of the canvas / graph
    var margin = {
        top: 30,
        right: 20,
        bottom: 30,
        left: 50
      },
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;

    // Parse the date / time
    var parseDate = d3.time.format("%d-%b-%y").parse;
    var formatTime = d3.time.format("%e %B"); // Format tooltip date / time

    // Set the ranges
    var x = d3.scale.linear().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);









    // Define the axes
    var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);

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

    // Define the line
    var valueline = d3.svg.line()
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.close);
      });

    // Define 'div' for tooltips
    var div = d3.select("body")
      .append("div") // declare the tooltip div 
      .attr("class", "tooltip") // apply the 'tooltip' class
      .style("opacity", 0); // set the opacity to nil

    // Adds the svg canvas
    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 + ")");

    // Get the data
    var datajson = '[  {    "date": "1",    "close": 58.13  },  {    "date": "2",    "close": 53.98  },  {    "date": "3",    "close": 67  },  {    "date": "4",    "close": 89.7  },  {    "date": "5",   "close": 99  },  {    "date": "6",    "close": 130.28  },  {    "date": "7",    "close": 166.7  },  {    "date": "8",    "close": 234.98  },  {    "date": "9",    "close": 345.44  },  {    "date": "10",    "close": 443.34  },  {    "date": "11",    "close": 543.7  },  {    "date": "12",    "close": 580.13  },  {    "date": "13",    "close": 605.23  },  {    "date": "14",    "close": 622.77  },  {    "date": "15",    "close": 626.2  },  {    "date": "16",    "close": 628.44  },  {    "date": "17",    "close": 636.23  },  {    "date": "18",    "close": 633.68  },  {    "date": "19",    "close": 624.31  },  {    "date": "20",    "close": 629.32  },  {    "date": "21",    "close": 618.63  },  {    "date": "22",    "close": 609.86  },  {    "date": "23",    "close": 617.62  },    {    "date": "24",    "close": 606.98}]';


    var data = JSON.parse(datajson);



    data.forEach(function(d) {
      d.date = d.date;
      d.close = +d.close;
    });

    // Scale the range of the data
    x.domain([0, Math.floor(2.5)]);
    y.domain([0, d3.max(data, function(d) {
      return d.close;
    })]);

    // Add the valueline path.
    svg.append("path")
      .attr("class", "line")
      .attr("d", valueline(data));

    // draw the scatterplot
    svg.selectAll("dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) {
        return x(d.date);
      })
      .attr("cy", function(d) {
        return y(d.close);
      })


    // Add the X Axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    // Add the Y Axis
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);


    d3.select('#inds').on("change", function() {
      var sect = document.getElementById("inds");
      var section = sect.options[sect.selectedIndex].value;


      x.domain([0, Math.floor(section)]);

      d3.select(".x.axis").call(xAxis);


      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

      // draw the scatterplot
      svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 5)
        .attr("cx", function(d) {
          return x(d.date);
        })
        .attr("cy", function(d) {
          return y(d.close);
        })


    });
  </script>
</body>

上面的代码是我正在尝试的代码。我重新画线和点。但上一行在图表中也可见。现在它就像一个多折线图。我一次只需要一行

Answer 1

您只需在 onChange 上重新绘制轴和圆：

d3.select('#inds')
        .on("change", function () {
            var sect = document.getElementById("inds");
            var section = sect.options[sect.selectedIndex].value;
            x.domain([0, Math.floor(section)]);
            d3.select(".x.axis").call(xAxis);
            svg.selectAll("dot")
                .data(data)
                .attr("r", 5)
                .attr("cx", function (d) {
                    return x(d.date);
                })
                .attr("cy", function (d) {
                    return y(d.close);
                })
        });

新答案：你没有更新你的图表你正在重新绘制它完全改变你 ron 更改为：

d3.select('#inds').on("change", function() {
  var sect = document.getElementById("inds");
  var section = sect.options[sect.selectedIndex].value;


  x.domain([0, Math.floor(section)]);

  d3.select(".x.axis").call(xAxis);


  svg.select(".line")
    .attr("d", valueline(data));

  // draw the scatterplot
  svg.selectAll("circle")
    .data(data)
    .attr("r", 5)
    .attr("cx", function(d) {
      return x(d.date);
    })
    .attr("cy", function(d) {
      return y(d.close);
    })


});

你可以在这里查看更新模式https://bl.ocks.org/mbostock/3808218

使用折线图 d3 中的下拉菜单重新缩放 x 轴

x axis rescale using dropdown in line chart d3

javascript

linechart

d3.js