如何将json添加到单个HTML文件

Question

我找到了很酷的代码，需要将JSON数据添加到代码中。我已经做到了（在JS的末尾），但是它不起作用（从下拉菜单中选择选项后，您应该会得到图形）。 JsFiddle here：

$("#dimensions").change(function() {
  var targID = $(this).val();
  $("div.style-sub-1").hide();
  $('#' + targID).show();
});

$(".inds").change(function() {
  var targID = $(this).val();
  $("div.style-sub-2").hide();
  $('#' + targID).show();
});

function filterJSON(json, key, value) {
  var result = [];
  for (var foo in json) {
    if (json[foo][key] === value) {
      result.push(json[foo]);
    }
  }
  return result;
}

var margin = {
    top: 20,
    right: 20,
    bottom: 130,
    left: 160
  },
  width = 1200 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom,
  padding = 0.25;

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width - margin.left - margin.right], padding);

var y = d3.scale.linear()
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10);
var currentData = [];
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 + ")");

d3.json("data.json", function(error, json) {
  if (error) throw error;

  json.forEach(function(d) {
    d.year = +d.year;
    d.value = +d.value;
  });

  var yr;

  $('.inds')
    .on("change", function() {

      var prod = $(this).val();
      console.log("prod:", prod);

      data = filterJSON(json, 'produce', prod);

      console.log("data: ", data);
      updateGraph(data);


      $('.years')
        .on("change", function() {

          var yr = $(this).val();
          yr = +yr;

          data1 = filterJSON(data, 'year', yr);

          updateGraph(data1, yr);
        });

    });

  // data = filterJSON(json, 'produce', 'apples');
  // data1 = filterJSON(data, 'year', 2015);
  // updateGraph(data1);

});

function updateGraph(data1, yr) {
  currentData = data1;
  console.log("year: ", yr);

  console.log("data1: ", data1);

  data1.sort(function(a, b) {
    return a.value - b.value;
  });

  x.domain(data1.map(function(d) {
    return d.state;
  }));
  y.domain([0, d3.max(data1, function(d) {
    return d.value;
  })]);

  var result = data1.filter(function(d) {
    return $("." + d.state.replace(/\s|\(|\)|\'|\,+/g, '')).attr("fill") != "#cccccc"
    // matching the data with selector status
  })
  console.log("result: ", result);

  var bars = svg.selectAll(".bar")
    .data(result, function(d) {
      return d.state.replace(/\s|\(|\)|\'|\,+/g, '')
    });

  bars.enter().append("rect")
    .attr("class", "bar")
    .on("mouseover", function(d) {
      //Get this bar's x/y values, then augment for the tooltip
      var xPosition = parseFloat(d3.select(this).attr("x")) + x.rangeBand() + 5;
      var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + height / 2;
      //Update the tooltip position and value
      d3.select("#tooltip")
        .style("left", xPosition + "px")
        .style("top", yPosition + "px")
        .select("#state")
        .text(d.state + ": " + d.produce + ": " + d.year + ": " + d.value);
      d3.select("#tooltip").classed("hidden", false);
    })
    .on("mouseout", function() {
      d3.select("#tooltip").classed("hidden", true);
    });

  bars.transition()
    .attr("id", function(d) {
      return 'tag' + d.state.replace(/\s|\(|\)|\'|\,+/g, '');
    })
    .attr("x", function(d) {
      return x(d.state);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.value);
    })
    .attr("height", function(d) {
      return height - y(d.value);
    });

  bars.exit().remove();

  // LEGEND GROUPS
  var legendGroups = d3.select("#legend")
    .selectAll(".legendGroup")
    .data(data1, function(d) {
      return d.state; // always try and use a key function to uniquely identify
    });

  var enterGroups = legendGroups
    .enter()
    .append("g")
    .attr("class", "legendGroup");

  legendGroups
    .exit()
    .remove();

  legendGroups
    .attr("transform", function(d, i) {
      return "translate(10," + (10 + i * 15) + ")"; // position the whole group
    });

  enterGroups.append("text")
    .text(function(d) {
      return d.state;
    })
    .attr("x", 15)
    .attr("y", 10);

  enterGroups
    .append("rect")
    .attr("width", 10)
    .attr("height", 10)
    .attr("fill", function(d) {
      return "#0000ff";
    })
    .attr("class", function(d, i) {
      return "legendcheckbox " + d.state.replace(/\s|\(|\)|\'|\,|\.+/g, '')
    })
    .on("click", function(d) {
      d.active = !d.active;
      d3.select(this).attr("fill", function(d) {
        if (d3.select(this).attr("fill") == "#cccccc") {
          return "#0000ff";
        } else {
          return "#cccccc";
        }
      })


      var result = currentData.filter(function(d, yr) {
        return $("." + d.state.replace(/\s|\(|\)|\'|\,+/g, '')).attr("fill") != "#cccccc"
      })
      console.log("data1 after legend click", data1);
      console.log("result after legend click: ", result);

      x.domain(result.map(function(d) {
        return d.state;
      }));
      //y.domain([0, d3.max(result, function(d) { return d.value; })]);

      svg.select(".x.axis")
        .transition()
        .call(xAxis);

      svg.selectAll(".bar")
        .data(result, function(d) {
          return d.state.replace(/\s|\(|\)|\'|\,|\.+/g, '')
        })
        .enter()
        .append("rect")
        .attr("class", "bar")
        .on("mouseover", function(d) {
          var xPosition = parseFloat(d3.select(this).attr("x")) + x.rangeBand() + 5;
          var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + height / 2;
          d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#state")
            .text(d.state + ": " + d.produce + ": " + d.year + ": " + d.value);
          d3.select("#tooltip").classed("hidden", false);
        })
        .on("mouseout", function() {
          d3.select("#tooltip").classed("hidden", true);
        });

      svg.selectAll(".bar")
        .transition()
        .attr("x", function(d) {
          return x(d.state);
        })
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
          return y(d.value);
        })
        .attr("height", function(d) {
          return height - y(d.value);
        });

      svg.selectAll(".bar").data(result, function(d) {
        return d.state.replace(/\s|\(|\)|\'|\,|\.+/g, '')
      }).exit().remove()

    }); // end on click

  svg.selectAll(".axis").remove();



  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("value");
};

body {
  font: 12px;
}

.bar {
  fill: #0078a5;
}

.bar:hover {
  fill: #18b7f2;
}

#tooltip {
  position: absolute;
  width: auto;
  height: auto;
  padding: 4px 6px;
  background-color: #fff;
  border: 1px solid #eee;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#pop {
  background-color: #fff;
  border: 1px solid #eee;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

#legendContainer {
  position: absolute;
  top: 85px;
  left: 10px;
  overflow: auto;
  height: 360px;
  width: 120px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
}

#legend {
  width: 100px;
  height: 200px;
}

.legend {
  font-size: 12px;
  font-weight: normal;
  text-anchor: left;
  cursor: pointer;
}

#bar {
  background: #ccc;
  color: #222;
  padding: 8px 15px;
  margin-right: 6px;
  border-radius: 5px;
  float: left;
  width: 20px;
}

.active {
  background: #0b3774 !important;
  color: #fff !important;
}

#dropdown {
  clear: both;
}

 <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <div id="dropdown">
    <div class="ccms_form_element cfdiv_custom" id="indSelectors">
      <label>Dimension:</label>
      <select size="1" id="dimensions" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
      <div class="clear"></div>
      <div id="error-message-style"></div>
    </div>
    <div id="secondaryDrop">
      <div id="Fruit" class="style-sub-1" style="display: none;" name="stylesub1">
        <label>Fruit</label>
        <select class="inds">
        <option value="">- Select -</option>
        <option value="apples">apples</option>
        <option value="pears">pears</option>
      </select>
      </div>
      <div id="Vegetables" class="style-sub-1" style="display: none;" name="stylesub1">
        <label>Vegetables</label>
        <select class="inds">
        <option value="">- Select -</option>
        <option value="tomatoes">tomatoes</option>
    </select>
      </div>
    </div>
    <div class="clear"></div>
    <div id="error-message-style-sub-1"></div>
  </div>
  <div id="tertiaryDrop">
    <div id="apples" class="style-sub-2" style="display: none;" name="stylesub2">
      <label>Year</label>
      <select class="years">
        <option value="">- Select a Year -</option>
        <option value="1950">1950</option>
        <option value="2000">2000</option>
      </select>
    </div>
    <div id="pears" class="style-sub-2" style="display: none;" name="stylesub2">
      <label>Year</label>
      <select class="years">
        <option value="">- Select a Year -</option>
        <option value="1900">1900</option>
        <option value="2015">2015</option>
      </select>
    </div>
    <div id="tomatoes" class="style-sub-2" style="display: none;" name="stylesub2">
      <label>Year</label>
      <select class="years">
        <option value="">- Select a Year -</option>
        <option value="2000">2000</option>
        <option value="2015">2015</option>
      </select>
    </div>
    <div class="clear"></div>
    <div id="error-message-style-sub-2"></div>
  </div>
  <div id="legendContainer" class="legendContainer">
    <svg id="legend"></svg>
  </div>
  <div id="tooltip" class="hidden">
    <p><span id="state"></span></p>
  </div>

请问，我在做什么错了？

谢谢