使用下拉菜单将JSON文件切换为可视化

Switch JSON file for a visualisation using a dropdown

本文关键字：可视化 文件 JSON 下拉菜单      更新时间：2023-09-26

我刚开始使用d3和JavaScript，当我试图用多个JSON文件创建可视化时，我遇到了一个问题。

我有两个JSON文件的格式相同，但包含不同的数据。我写了一个代码，从JSON文件产生两个线形图，它与任何一个文件一起工作。我想做的是使用下拉菜单在文件之间切换，这样我就可以选择显示哪些数据。

我希望有人有一个工作的例子，他们可以分享或可以告诉我如何做到这一点?

我的代码，因为它是(你可以看到，我正在使用文件All。Json，我希望能够使用下拉菜单引用不同的文件):

var h = 200;
var w = 400;
var padding = 40;
function buildline(ds) {
  //scales
  var xScale = d3.scale.linear()
    .domain([
      d3.min(ds.timeSeries, function(d) {
        return d.year
      }),
      d3.max(ds.timeSeries, function(d) {
        return d.year
      })
    ])
    .range([padding, w - padding]);
  var yScale = d3.scale.linear()
    .domain([0, d3.max(ds.timeSeries, function(d) {
      return d.trips;
    }) + padding])
    .range([h - padding, 10]);
  var yAxisGen = d3.svg.axis().scale(yScale).orient("left");
  var xAxisGen = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.format("0000"));
  var lineFun = d3.svg.line()
    .x(function(d) {
      return xScale(d.year);
    })
    .y(function(d) {
      return yScale(d.trips);
    })
    .interpolate("linear");
  var svg = d3.select("body").append("svg").attr({
    width: w,
    height: h
  })
  var yAxis = svg.append("g").call(yAxisGen)
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ", 0)");
  var xAxis = svg.append("g").call(xAxisGen)
    .attr("class", "axis")
    .attr("transform", "translate(0, " + (h - padding) + ")");
  var viz = svg.append("path")
    .attr({
      d: lineFun(ds.timeSeries),
      "stroke": "green",
      "stroke-width": 2,
      "fill": "none"
    });
}
function showHeader(ds) {
  d3.select("body").append("h1")
    .text(ds.category + " (2002-2013)");
}
d3.json("All.json", function(error, data) {
  if (error) {
    console.log(error);
  } else {
    console.log(data);
  }
  data.contents.forEach(function(ds) {
    console.log(ds);
    showHeader(ds);
    buildline(ds);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<p>Choose Mode
  <select id="mode-option">
    <option = value ="All">All modes</option>
    <option = value ="Other">Other</option>
  </select>
</p>

你的select不需要额外的等号

<select id="mode-option">
    <option value="All">All modes</option>
    <option value="Other">Other</option>
</select>

然后分配一个事件侦听器，以根据选择

确定文件。
document.getElementById('mode-option').addEventListener('change', function () {
    var file = this.value + '.json';
    d3.json(file, function (error, data) { ...
});
相关文章：