我正在尝试使用更新功能制作多线图，但是，我的工具提示没有相应更新。我对D3很新，所以任何帮助都会非常感激!!!
你可以在这里看到整件事： http://matplotlib.org/mpl_toolkits/mplot3d/api.html#mpl_toolkits.mplot3d.axes3d.Axes3D.set_zscale
这是我的代码。 CSS body {font：12px Helvetica Neue;}
path {
stroke: #;
stroke-width: ;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: #e7eff1;
stroke-width: 1;
shape-rendering: crispEdges;
}
.graph-svg-component {
background-color:#e7eff1;
opacity:0.9;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: #990000;
}
.line {
fill: none;
stroke: #7ea7ba;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 2.5px;
}
.line-hover {
stroke: #cc6200;
stroke-width:3;
}
.voronoi path {
fill: none;
pointer-events: all;
}
.grid .tick{
stroke:white;
stroke-width:1.5px;
stroke-opacity:0.9;
shape-rendering: crispEdges;
}
.grid path{
stroke-width:0;
}
.lable{
font-size: 30;
}
.lable-hover{
font-size: 30;
}
.focus text{
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
D3代码在这里：
var margin = {top: 60, right: 60, bottom: 50, left: 60},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse,
bisectDate = d3.bisector(function(d) { return d.Year; }).left,
formatValue = d3.format(",.2f");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(7);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);
var voronoi = d3.geom.voronoi()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.value); })
.clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);
// var valueline1 = d3.svg.line()
// // .interpolate("basis")
// .x(function(d) { return x(d.Year); })
// .y(function(d) { return y(d.Fossil_Fuels); });
var valueline2 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Nuclear_Electric_Power); });
// var valueline3 = d3.svg.line()
// // .interpolate("basis")
// .x(function(d) { return x(d.Year); })
// .y(function(d) { return y(d.test); });
var valueline4 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Coal); });
var valueline5 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Natural_Gas ); });
var valueline6 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Crude_Oil ); });
var valueline7 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Biofuels ); });
var valueline8 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Other_Renewable ); });
var valueline9 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Total_Energy_Production ); });
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "graph-svg-component")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
tmp = null;
function make_x_axis() { return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() { return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
// Get the data
d3.csv("texas_energy_production.csv", function(error, data) {
var flatData = [];
data.forEach(function(d) {
d.Year = parseDate(d.Year);
// d.Fossil_Fuels = +d.Fossil_Fuels;
d.Nuclear_Electric_Power = +d.Nuclear_Electric_Power;
d.test = +d.test;
d.Coal = +d.Coal
d.Natural_Gas = +d.Natural_Gas;
d.Crude_Oil = +d.Crude_Oil;
d.Biofuels = +d.Biofuels;
d.Other_Renewable = +d.Other_Renewable;
// d.Total_Energy_Production = +d.Total_Energy_Production;
// flatData.push({Year: d.Year, value: d.Fossil_Fuels, key: "Fossil_Fuels"});
flatData.push({Year: d.Year, value: d.Nuclear_Electric_Power, key: "Nuclear_Electric_Power"});
// flatData.push({Year: d.Year, value: d.test, key: "test"});
flatData.push({Year: d.Year, value: d.Coal, key: "Coal"});
flatData.push({Year: d.Year, value: d.Natural_Gas, key: "Natural_Gas"});
flatData.push({Year: d.Year, value: d.Crude_Oil, key: "Crude_Oil"});
flatData.push({Year: d.Year, value: d.Biofuels, key: "Biofuels"});
flatData.push({Year: d.Year, value: d.Other_Renewable, key: "Other_Renewable"});
// flatData.push({Year: d.Year, value: d.Total_Energy_Production, key: "Total_Energy_Production"});
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain([0, d3.max(data, function(d) { return Math.max( d.Nuclear_Electric_Power,d.Natural_Gas,d.Crude_Oil,d.Biofuels,d.Other_Renewable); })])
// Add the valueline path.
// svg.append("path")
// .attr("class", "line")
// .attr("d", valueline1(data));
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
// svg.append("path")
// .attr("class", "line Fossil_Fuels")
// .attr("d", valueline1(data));
svg.append("path")
.attr("class", "line Nuclear_Electric_Power")
.attr("d", valueline2(data));
// svg.append("path")
// .attr("class", "line test")
// .attr("d", valueline3(data));
svg.append("path")
.attr("class", "line Coal")
.attr("d", valueline4(data));
svg.append("path")
.attr("class", "line Natural_Gas")
.attr("d", valueline5(data));
svg.append("path")
.attr("class", "line Crude_Oil")
.attr("d", valueline6(data));
svg.append("path")
.attr("class", "line Biofuels")
.attr("d", valueline7(data));
svg.append("path")
.attr("class", "line Other_Renewable")
.attr("d", valueline8(data));
// svg.append("path")
// .attr("class", "line Total_Energy_Production")
// .attr("d", valueline9(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(-100,-100)");
focus.append("circle")
.attr("r", 4);
focus.append("text")
.attr("x", -9)
.attr("y",-15)
.attr("dy", ".35em");
var voronoiGroup = svg.append("g")
.attr("class", "voronoi");
voronoiGroup.selectAll("path")
.data(voronoi(flatData))
.enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
function mouseover(d) {
console.log(d);
d3.select("."+d.key).classed("line-hover", true);
focus.attr("transform", "translate(" + x(d.Year) + "," + y(d.value) + ")");
focus.select("text")
.text( d.key+" "+d.value )
.style("font-size", "14")
.style("opacity", "0.75")
.style("font-weight","500");
}
function mouseout(d) {
d3.select("."+d.key).classed("line-hover", false);
focus.attr("transform", "translate(-100,-100)");
}
});
// ** Update data section (Called from the onclick)
function updateData() {
// Get the data again
d3.csv("data2.csv", function(error, data) {
var flatData = [];
data.forEach(function(d) {
d.Year = parseDate(d.Year);
d.Total_Energy_Production = +d.Total_Energy_Production;
flatData.push({Year: d.Year, value: d.Total_Energy_Production, key: "Total_Energy_Production"});
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain([0, d3.max(data, function(d) { return d.Total_Energy_Production; })]);
// Select the section we want to apply our changes to
var change = d3.select("body").transition().ease("linear");
// var change = d3.selectAll("body").transition()
// .ease("linear")
// .duration(1200)
// .attr("d", valueline9(data));
// Make the changes
change.selectAll(".line") // change the line
.duration(1200)
.attr("d", valueline9(data))
.attr("class", "line Total_Energy_Production");
// svg.select(".x.axis") // change the x axis
// .duration(750)
// .call(xAxis);
change.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
// change.selectAll(".voronoi").remove();
// d3.selectAll(".focus")
// .data(function (d) { return d.Total_Energy_Production })
});
}