1
Ich versuche herauszufinden, wie man zwei d3-Diagramme auf die gleiche Seite mit einem auf der linken Seite und einem auf der rechten Seite bekommen. Was ich jedoch bekomme, ist dies. 
Hinzufügen mehrerer Grafiken zu einer Seite mit D3
Dies ist meine HTML-Datei.
<!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>Dies ist meine js-Datei.
(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;
}
})();Beide sind Anzeigen, aber ich bin nicht sicher, wie es so eingestellt, dass sie Position richtig. Bitte helfen Sie.