Question

我是使用d3和JavaScript的新手，我在尝试使用多个JSON文件创建可视化时遇到了问题。

我有两个格式相同的JSON文件，但包含不同的数据。我编写了一个代码，该代码从JSON文件生成两个折线图，该文件适用于任一文件。我想要做的是使用下拉菜单在文件之间切换，以便我可以交替显示哪些数据。

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

我的代码是（你可以看到我使用文件All.json，我希望能够使用下拉列表引用不同的文件）：

＆＃13;

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);
  })
});

＆＃13;

<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>

＆＃13;

Answer 1

您的选择不需要额外的等号

<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) { ...
});

使用下拉列表切换可视化的JSON文件

1 个答案: