如何将单独的json文件实现为现有代码？

Question

我有一个带有单独json文件的代码。我的问题是，我需要将json代码添加到现有的JS代码中。请任何建议？我对此很陌生。

我试图将json添加到JS中，但是我不知道如何进行。

这是jsfiddle https://jsfiddle.net/Michal785/m6hyx3tk/

$("#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://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

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

<script src="script.js"></script>

我希望，我将在jsfiddle中获得所有代码，而无需外部文件（data.json）。

非常感谢