2
Ich baue gerade ein Diagramm mit d3.js und HTML. Ich versuche Interaktivität einzugeben, indem ich einen Selektor hinzufüge, der die angezeigten Daten basierend auf Ihrer Auswahl ändert. Ich bin mir überhaupt nicht sicher, wie man den Selektor ändert, welche Daten verwendet werden.Ändern von Daten in d3 Basierend auf Auswahleingabe
<!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>So wissen Sie die Variablen April, Mai, Juni, Juli, August und September sind die, die Ich mag wäre es zwischen sich ändern und die .data Wähler in den "Balken" Variable Dort sollten sich die Daten zwischen Monaten ändern.
Vielen Dank im Voraus!