1
我想弄清楚如何將兩個d3圖形放在同一頁上，其中一個在左側，另一個在右側。但是，我得到的是這個。 
用D3在一個頁面中添加多個圖形
這是我的HTML文件。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.polyline path {
fill: none;
stroke: #666;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
.xaxis text {
font: 10px sans-serif;
}
.yaxis text {
font: 10px sans-serif;
}
.xaxis path,
.xaxis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.yaxis path,
.yaxis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src = "project3.js">//https://my.up.ist.psu.edu/lng5099/project3.html </script>
</body>
</html>這是我的js文件。
(function() {
\t var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {};
var axis = d3.svg.axis().orient("left");
var line = d3.svg.line() //define a function to convert points into a polyline
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");//line style. you can try "cardinal".
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var cars=[];
d3.csv("cars.csv", type, function(error, data) {
cars = data;
drawPC();
});
function drawPC() {
// Extract the list of dimensions and create a scale for each.
for (var dim in cars[0]) {
\t if (dim != "name") {
\t \t y[dim] = d3.scale.linear()
\t \t \t .domain([d3.min(cars, function(d) { return +d[dim]; }), d3.max(cars, function(d) { return +d[dim]; })])
\t \t .range([height,0]);
\t }
}
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { return d != "name";}));
//draw polylines
for (var i=1; i< cars.length; i++) { //for each car
\t //prepare the coordinates for a polyline
\t var lineData = []; //initialize an array for coordinates of a polyline
\t for (var prop in cars[0]) { //get each dimension
\t if (prop != "name") { //skip the name dimension
\t var point = {}; //initialize a coordinate object
\t var val = cars[i][prop]; //obtain the value of a car in a dimension
\t \t point['x'] = x(prop); //x value: mapping the dimension
\t point['y'] = y[prop](val);//y value: mapping the value in that dimension
\t lineData.push(point); //add the object into the array
\t }
\t }
\t //draw a polyline based on the coordindates
chart.append("g")
\t .attr("class", "polyline")
\t .append("path") // a path shape
\t \t .attr("d", line(lineData)); //line() is a function to turn coordinates into SVG commands
}
//next: draw individual dimension lines
//position dimension lines appropriately
var g = chart.selectAll(".dimension")
\t .data(dimensions)
\t .enter().append("g")
\t .attr("class", "dimension")
\t .attr("transform", function(d) { return "translate(" + x(d) + ")"; }); //translate each axis
// Add an axis and title.
g.append("g")
\t .attr("class", "axis")
\t .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
\t .append("text")
\t .style("text-anchor", "middle")
\t .attr("y", -9)
\t .text(function(d) { return d; });
};
//this function coerces numerical data to numbers
function type(d) {
d.economy = +d.economy; // coerce to number
d.displacement = +d.displacement; // coerce to number
d.power = +d.power; // coerce to number
d.weight = +d.weight; // coerce to number
d.year = +d.year;
return d;
}
})();
(function() {
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear().range([50, width]),
y = d3.scale.linear().range([height-20,0]);
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var cars=[];
d3.csv("cars.csv", type, function(error, data) {
cars = data;
drawXY();
});
function drawXY(){
x.domain([d3.min(cars, function(d) { return d.year; }), d3.max(cars, function(d) { return d.year; })]);
y.domain([d3.min(cars, function(d) { return d.power; }), d3.max(cars, function(d) { return d.power; })]);
var yPos = height -20;
chart.append("g")
\t .attr("class", "xaxis")
\t .attr("transform", "translate(0," + yPos + ")")
\t .call(xAxis);
chart.append("g")
\t .attr("class", "yaxis")
\t .attr("transform", "translate(50,0)")
\t .call(yAxis);
chart.selectAll(".dot")
\t .data(cars)
\t .enter().append("circle")
\t .attr("class", "dot")
\t .attr("cx", function(d) { return x(d.year); })
\t .attr("cy", function(d) { return y(d.power); })
\t .attr("r", 3);
}
d3.selectAll("circle").data(cars).enter()
.append("circle")
.classed("circle", true)
.on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
.on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); });
function type(d) {
d.economy = +d.economy; // coerce to number
d.displacement = +d.displacement; // coerce to number
d.power = +d.power; // coerce to number
d.weight = +d.weight; // coerce to number
d.year = +d.year;
return d;
}
})();兩者都顯示，但我不知道如何設置它，這樣他們的位置正確。請幫忙。