1
私はd3グラフを作成するための基本的なチュートリアルに従っています。このチュートリアルはかなり簡単なので、チュートリアルのグラフが正しく表示されるようにしています。 2番目のグラフを追加しようとしましたが、同じデータのコピーを指していましたが、2番目のグラフを表示する方法はわかりません。次のように同じページに複数のd3グラフがある問題
HTMLは次のとおりです。次のように
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strategy Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="container">
<h1 class="navbar" id="title">Dashboard</h1>
<p>In this tutorial we will walk through two examples of how to use D3.js. Enjoy.</p>
<p> These tutorials are based off of <a href="https://square.github.io/intro-to-d3/examples/">Intro to D3.JS</a> and <a href="http://bl.ocks.org/mbostock/3883245">Line Chart</a>.</p><br>
<h2>Revenue</h2><br>
<h3>So many dollars!</h3><br>
<div class="linechart"></div>
<div class="linechartib"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
jsがある：
'use strict';
//Dashboard
//setup size of line chart
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
//parse data from file
var parseDate = d3.time.format("%b").parse;
//set scales
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
//create axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//construct the line using points from data
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.dollars); });
var svg = d3.select(".linechart").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.tsv("data.tsv", function(error, data) {
if (error) throw error;
//traverse through the data
data.forEach(function(d) {
d.date = parseDate(d.date);
d.dollars = +d.dollars;
});
//establish the domain for x and y axes
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.dollars; }));
//add "groups"
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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("RevPOH (dollars)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
//Percent IB
/////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
var marginib = {top: 20, right: 20, bottom: 30, left: 50},
widthib = 600 - marginib.left - marginib.right,
heightib = 400 - marginib.top - marginib.bottom;
//set scales
var xib = d3.time.scale()
.range([0, widthib]);
var yib = d3.scale.linear()
.range([heightib, 0]);
//create axes
var xAxisib = d3.svg.axis()
.scale(xib)
.orient("bottom");
var yAxisib = d3.svg.axis()
.scale(yib)
.orient("left");
//construct the line using points from data
var lineib = d3.svg.line()
.xib(function(d) { return xib(d.date); })
.yib(function(d) { return yib(d.homes); });
var svgib = d3.select(".linechartib").append("svg")
.attr("width", widthib + marginib.left + marginib.right)
.attr("height", heightib + marginib.top + marginib.bottom)
.append("g")
.attr("transform", "translate(" + marginib.left + "," + marginib.top + ")");
d3.tsv("dataib.tsv", function(error, dataib) {
if (error) throw error;
//traverse through the data
dataib.forEach(function(d) {
dib.date = parseDate(d.date);
dib.homes = +d.homes;
});
//establish the domain for x and y axes
xib.domain(d3.extent(dataib, function(d) { return d.date; }));
yib.domain(d3.extent(dataib, function(d) { return d.homes; }));
//add "groups"
svgib.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + heightib + ")")
.call(xAxisib);
svgib.append("g")
.attr("class", "y axis")
.call(yAxisib)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Homes (percent)");
svgib.append("path")
.datum(dataib)
.attr("class", "line")
.attr("d", lineib);
});
ありがとうございました！