我正在使用d3.js
创建两个图表我有两个并排的svgs。现在，其中一个正确显示。但是，做同样的事情，第二个svg无法正确渲染。
我面临的问题是，在第二个svg中，＆lt;路径＆gt;没有得到正确的值，并且根本没有显示行。
我得到的是这样的东西：
我想在第二张图表中使用完全相同的行。
相同的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
<style>
body {
margin: 0px;
}
#parent {
text-align:center;
}
svg {
font: 20px sans-serif;
}
.background path {
fill: none;
stroke: none;
stroke-width: 15px;
pointer-events: stroke;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.background2 path {
fill: none;
stroke: none;
stroke-width: 15px;
pointer-events: stroke;
}
.foreground2 path {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.axis .title {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis2 .title2 {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.axis2 line,
.axis2 path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.label {
-webkit-transition: fill 25ms linear;
}
.active .label:not(.inactive) {
font-weight: bold;
}
.label.inactive {
fill: #ccc;
}
.label2 {
-webkit-transition: fill 25ms linear;
}
.active2 .label2:not(.inactive) {
font-weight: bold;
}
.label2.inactive2 {
fill: #ccc;
}
.foreground path.inactive {
stroke: #ccc;
stroke-opacity: .5;
stroke-width: 1px;
}
.foreground2 path.inactive2 {
stroke: #ccc;
stroke-opacity: .5;
stroke-width: 1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse bg-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" style="color: #ffffff;" href="/">News: A friend or foe</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a style="color: #ffffff;" href="/">Home</a></li>
<li><a style="color: #ffffff;" href="/">About</a></li>
</div>
</div>
</nav>
<div>
<div class="col-md-6">
<svg id= "svg1" width="800" height="400" style="background: white;"></svg>
</div>
<div class="col-md-6">
<svg id="svg2" width="800" height="400" style="background: white;"></svg>
</div>
</div>
<script>
/////////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 1/////////////////////////////////////////////////////////////////////////////////
var margin = {top: 30, right: 40, bottom: 20, left: 200},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var dimensions = [
{
name: "name",
scale: d3.scale.ordinal().rangePoints([0, height]),
type: String
},
{
name: "January",
scale: d3.scale.linear().range([0, height]),
type: Number
},
{
name: "February",
scale: d3.scale.linear().range([height, 0]),
type: Number
},
{
name: "March",
scale: d3.scale.sqrt().range([height, 0]),
type: Number
},
{
name: "April",
scale: d3.scale.linear().range([height, 0]),
type: Number
}
];
var x = d3.scale.ordinal()
.domain(dimensions.map(function(d) { return d.name; }))
.rangePoints([0, width]);
var line = d3.svg.line()
.defined(function(d) { return !isNaN(d[1]); });
var yAxis = d3.svg.axis()
.orient("left");
var svg = d3.select("#svg1")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dimension = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d.name) + ")"; });
d3.tsv("projections.tsv", function(error, data) {
if (error) throw error;
dimensions.forEach(function(dimension) {
dimension.scale.domain(dimension.type === Number
? d3.extent(data, function(d) { return +d[dimension.name]; })
: data.map(function(d) { return d[dimension.name]; }).sort());
});
svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", draw);
svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", draw);
dimension.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); })
.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d.name; });
// Rebind the axis data to simplify mouseover.
svg.select(".axis").selectAll("text:not(.title)")
.attr("class", "label")
.data(data, function(d) { return d.name || d; });
var projection = svg.selectAll(".axis text,.background path,.foreground path")
.on("mouseover", mouseover)
//.on("mouseout", mouseout);
function mouseover(d) {
svg.classed("active", true);
projection.classed("inactive", function(p) { return p !== d; });
projection.filter(function(p) { return p === d; }).each(moveToFront);
}
// function mouseout(d) {
// svg.classed("active", false);
// projection.classed("inactive", false);
// }
function moveToFront() {
this.parentNode.appendChild(this);
}
});
function draw(d) {
return line(dimensions.map(function(dimension) {
return [x(dimension.name), dimension.scale(d[dimension.name])];
}));
}
//////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 2/////////////////////////////////////////////////////////////////////////////////
var margin2 = {top2: 30, right2: 40, bottom2: 20, left2: 200},
width2 = 700 - margin2.left2 - margin2.right2,
height2 = 400 - margin2.top2 - margin2.bottom2;
var dimensions2 = [
{
name: "name",
scale: d3.scale.ordinal().rangePoints([0, height2]),
type: String
},
{
name: "January",
scale: d3.scale.linear().range([0, height2]),
type: Number
},
{
name: "February",
scale: d3.scale.linear().range([height2, 0]),
type: Number
},
{
name: "March",
scale: d3.scale.sqrt().range([height2, 0]),
type: Number
},
{
name: "April",
scale: d3.scale.linear().range([height2, 0]),
type: Number
}
];
var x2 = d3.scale.ordinal()
.domain(dimensions2.map(function(d) { return d.name; }))
.rangePoints([0, width2]);
var line2 = d3.svg.line()
.defined(function(d) { return !isNaN(d[1]); });
var yAxis2 = d3.svg.axis()
.orient("left");
var svg2 = d3.select("#svg2")
.attr("width2", width2 + margin2.left2 + margin2.right2)
.attr("height2", height2 + margin2.top2 + margin2.bottom2)
.append("g")
.attr("transform", "translate(" + margin2.left2 + "," + margin2.top2 + ")");
var dimension2 = svg2.selectAll(".dimension2")
.data(dimensions2)
.enter().append("g")
.attr("class", "dimension2")
.attr("transform", function(d) { return "translate(" + x2(d.name) + ")"; });
d3.tsv("projections2.tsv", function(error, data2) {
if (error) throw error;
dimensions2.forEach(function(dimension2) {
dimension2.scale.domain(dimension2.type === Number
? d3.extent(data2, function(d) { return +d[dimension2.name]; })
: data2.map(function(d) { return d[dimension2.name]; }).sort());
});
svg2.append("g")
.attr("class", "background2")
.selectAll("path")
.data(data2)
.enter().append("path")
.attr("d", draw2);
console.log(data2);
svg2.append("g")
.attr("class", "foreground2")
.selectAll("path")
.data(data2)
.enter().append("path")
.attr("d", draw2);
dimension2.append("g")
.attr("class", "axis2")
.each(function(d) { d3.select(this).call(yAxis2.scale(d.scale)); })
.append("text")
.attr("class", "title2")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d.name; });
// Rebind the axis data to simplify mouseover.
svg2.select(".axis2").selectAll("text:not(.title2)")
.attr("class", "label2")
.data(data2, function(d) { return d.name || d; });
var projection2 = svg2.selectAll(".axis2 text,.background2 path,.foreground2 path")
.on("mouseover", mouseover2)
//.on("mouseout", mouseout);
function mouseover2(d) {
svg2.classed("active2", true);
projection2.classed("inactive2", function(p) { return p !== d; });
projection2.filter(function(p) { return p === d; }).each(moveToFront2);
}
// function mouseout(d) {
// svg.classed("active", false);
// projection.classed("inactive", false);
// }
function moveToFront2() {
this.parentNode.appendChild(this);
}
});
function draw2(d) {
return line2(dimensions2.map(function(dimension2) {
return [x2(dimension2.name), dimension2.scale(d[dimension2.name])];
}));
}
</script>
</body>
<html>
如果有人能告诉我，我在这里做错了什么，我真的很感激？ 提前谢谢。
数据如下：
January February March April name
87.7 0.29 0.37 18.25 Eckert III
87.5 0.25 0.19 20.54 Natural Earth
87.4 0.27 0.17 24.2 Winkel II
86.5 0.23 0.28 19.15 Kavraisky VII
85 0.26 0.18 23.28 Winkel Tripel
84.3 0.27 0.19 21.27 Robinson
83.2 0.25 0.43 16.14 Fahey
81.9 0.36 0 28.73 Eckert IV
81.8 0.26 0.24 22.31 Hölzel
80.4 0.26 0.34 20.41 Wagner VI
80 0.3 0.29 23.47 Eckert V
Projection2.tsv
Acc. 40º 150% Scale Areal Angular name
87.7 0.29 0.37 18.25 Eckert III
87.5 0.25 0.19 20.54 Natural Earth
87.4 0.27 0.17 24.2 Winkel II
86.5 0.23 0.28 19.15 Kavraisky VII
85 0.26 0.18 23.28 Winkel Tripel
84.3 0.27 0.19 21.27 Robinson
83.2 0.25 0.43 16.14 Fahey
81.9 0.36 0 28.73 Eckert IV
81.8 0.26 0.24 22.31 Hölzellllll
答案 0 :(得分：1)
如果没有一个工作示例，很难说 - 我们缺少projection.tsv / projections2.tsv文件，我们可以用你的代码制作一个有效的jsfiddle
但我确实注意到了这一点 - ＆gt;
.attr("width2", width2 + margin2.left2 + margin2.right2)
.attr("height2", height2 + margin2.top2 + margin2.bottom2)
应为.attr("width" ...且.attr("height" ...不以“2”为后缀。问题是搜索和替换错误？
编辑：
啊，你说第二个文件有不同的标题，所以它不会被第二个图表中的平行坐标图拾取，它仍然在寻找1月，2月等 - http://jsfiddle.net/osnky2qr/6/ - 这里是一个小提琴其中第二个图表在第二个文件中查找标题并且有效（我更改了tsv加载以在本地加载数据而不是作为回调'cos在jsfiddle中更容易）