2
現在、d3.jsとHTMLを使用してグラフを作成中です。私はあなたの選択に基づいて表示されたデータを変更するセレクタを追加して対話性を入力しようとしています。どのデータを使用しているのかをセレクタに変更する方法はわかりません。d3のデータを選択入力に基づいて変更する
<!DOCTYPE html>
<html>
<head>
\t <meta><meta http-equiv="refresh" content="90">
<meta name="description" content="Drawing Shapes w/ D3 - " />
<meta charset="utf-8">
\t <title>Resources per Project</title>
\t <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
\t <style type="text/css">
\t h1 {
\t \t font-size: 35px;
\t \t color: darkgrey;
\t \t font-family: Helvetica;
\t \t border-bottom-width: 3px;
\t \t border-bottom-style: dashed;
\t \t border-bottom-color: black;
\t }
\t h2 {
\t \t font-size: 20px;
\t \t color: black;
\t \t font-family: Helvetica;
\t \t text-decoration: underline;
\t \t margin-left: 290px;
\t \t margin-top: 2px;
\t }
\t </style>
</head>
<body>
<h1>Resources used per Project</h1>
<p>Choose Month:
\t <select id="label-option">
\t \t <option value="April">April</option>
\t \t <option value="May">May</option>
\t \t <option value="June">June</option>
\t \t <option value="July">July</option>
\t \t <option value="August">August</option>
\t \t <option value="September">September</option>
\t </select>
<script type="text/javascript">
\t var width = 800
\t var height = 500
\t var emptyVar = 0
\t var dataArrayProjects = ['2G','An','At','Au','AW','Ch','CI','CN']
\t var April = [0.35,1.66,3.04,1.54,3.45,2.56,2.29,1.37]
\t var May = [0.36,1.69,3.08,1.54,3.62,2.61,2.22,1.44]
\t var June = [0.34,1.7,3.08,1.63,3.66,2.68,2.24,1.51]
\t var July = [0.3,1.72,3.17,1.67,3.56,2.56,2.17,1.44]
\t var August = [0.28,1.79,3.18,1.71,3.62,2.73,2.26,1.54]
\t var September = [0.23,1.74,3.12,1.61,3.66,2.71,2.2,1.48]
\t var widthScale = d3.scale.linear()
\t \t \t \t \t .domain([0, 4])
\t \t \t \t \t .range([0, width-60]);
\t var heightScale = d3.scale.ordinal()
\t .domain(dataArrayProjects)
\t .rangePoints([10, height-85]);
\t var color = d3.scale.linear()
\t \t \t \t .domain([0,4])
\t \t \t \t .range(["#000066", "#22abff"])
\t var axis = d3.svg.axis()
\t \t \t \t .ticks("10")
\t \t \t \t .scale(widthScale);
\t var yAxis = d3.svg.axis()
\t .scale(heightScale)
\t .orient("left");
\t var canvas = d3.select("body")
\t \t \t \t .append("svg")
\t \t \t \t .attr("width", width)
\t \t \t \t .attr("height", height)
\t \t \t \t .append("g")
\t \t \t \t .attr("transform", "translate(40, 0)");
\t var bars = canvas.selectAll("rect")
\t \t \t \t .data(April)
\t \t \t \t .enter()
\t \t \t \t \t .append("rect")
\t \t \t \t \t \t .attr("width", emptyVar)
\t \t \t \t \t \t .attr("height", 50)
\t \t \t \t \t \t .attr("fill", function(d) { return color(d) })
\t \t \t \t \t \t .attr("y", function(d, i) { return i * 55 })
\t canvas.append("g")
\t \t .attr("transform", "translate(0, 430)")
\t \t .attr("font-family", "Helvetica")
\t \t .attr("font-size", "15px")
\t \t .call(axis);
\t canvas.append("g")
\t \t \t .attr("font-family", "Helvetica")
\t \t \t .attr("font-size", "15px")
\t \t \t .style("fill", "black")
\t \t .attr("class", "y axis")
\t \t .call(yAxis);
\t bars.transition()
\t \t \t .duration(1500)
\t \t \t .delay(200)
\t \t \t .attr("width", function(d) { return widthScale(d); })
</script>
<h2>Resources</h2>
</body>
</html>だから、4月、5月、6月、7月、8月、9月は、私はそれが間に変更したいものと、「バー」変数に.dataのセレクタの変数を知っています何ヶ月かの間にデータが変化する場所です。
ありがとうございます！