如何使D3折线图响应 [英] How to make a D3 Line Chart Responsive
本文介绍了如何使D3折线图响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是使用D3图表的新手，但在使多折线图具有响应能力时遇到问题.我已经查看了一些有关如何使D3响应的示例，但是我无法使其在我的图形上起作用.如果有人可以帮助我制作我目前具有响应能力的代码，我将非常感激.
I am new to using D3 charts and am having an issue making my multi line chart responsive. I have reviewed some examples on how to make D3 responsive, but I can not make it work on my graph. If someone could assist me in making the code I currently have responsive I would really appreciate it.
这是代码:
// Set the dimensions of the canvas / graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(8);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.average_ticnum); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.average_fatiguenum); });
var valueline3 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.average_stressnum); });
var valueline4 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.sum_nf_sugars); });
var valueline5 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.sum_nf_total_carbohydrate); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.json("progress_output.php?useremail=<?php echo $useremail; ?>", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.average_ticnum = +d.average_ticnum;
d.fatiguenum = +d.average_fatiguenum;
d.stressnum = +d.average_stressnum;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0,12]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.style("stroke", "#891f83")
.attr("id","ticLine")
.attr("d", valueline(data));
svg.append("path")
.attr("class", "line")
.style("stroke", "#7db6e3")
.attr("id","fatigueLine")
.attr("d", valueline2(data));
svg.append("path")
.attr("class", "line")
.style("stroke", "#36376a")
.attr("id","stressLine")
.attr("d", valueline3(data));
svg.append("path")
.attr("class", "line")
.style("stroke", "#9bcf81")
.attr("id","sugarLine")
.attr("d", valueline4(data));
svg.append("path")
.attr("class", "line")
.style("stroke", "#efa465")
.attr("id","carbLine")
.attr("d", valueline5(data));
// Add the Dots
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("id","ticDots")
.attr("r", 3.5)
.style("fill", "#891f83")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.average_ticnum); });
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", "#7db6e3")
.attr("id","fatigueDots")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.average_fatiguenum); });
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", "#36376a")
.attr("id", "stressDots")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.average_stressnum); });
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("id","sugarDots")
.attr("r", 3.5)
.style("fill", "#9bcf81")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.sum_nf_sugars); });
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", "#efa465")
.attr("id","carbDots")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.sum_nf_total_carbohydrate); });
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Add the Tic title
svg.append("text")
.attr("x", 15)
.attr("y", 0)
.attr("class", "legend")
.attr("id", "ticText")
.style("color", "#891f83")
.style("fill", "#891f83")
.style("cursor", "pointer")
.style("font-family", "cooperbook")
.on("click", function(){
// Determine if current line is visible
var active = ticLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
width = 200;
height = 200;
d3.select("#ticLine").style("opacity", newOpacity);
d3.selectAll("#ticDots").style("opacity", newOpacity);
// Update whether or not the elements are active
ticLine.active = active;
})
.text("Tic Severity");
//Add the fatigue title
svg.append("text")
.attr("x", 115)
.attr("y", 0)
.attr("class", "legend")
.style("color", "#7bd6e3")
.style("fill", "#7bd6e3")
.style("cursor", "pointer")
.style("font-family", "cooperbook")
.on("click", function(){
// Determine if current line is visible
var active = fatigueLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#fatigueLine").style("opacity", newOpacity);
d3.selectAll("#fatigueDots").style("opacity", newOpacity);
// Update whether or not the elements are active
fatigueLine.active = active;
})
.text("Fatigue");
//Add the Stress title
svg.append("text")
.attr("x", 190)
.attr("y", 0)
.attr("class", "legend")
.style("color", "#36376a")
.style("fill", "#36376a")
.style("cursor", "pointer")
.style("font-family", "cooperbook")
.on("click", function(){
// Determine if current line is visible
var active = stressLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#stressLine").style("opacity", newOpacity);
d3.selectAll("#stressDots").style("opacity", newOpacity);
// Update whether or not the elements are active
stressLine.active = active;
})
.text("Stress");
//Add the sugar title
svg.append("text")
.attr("x", 250)
.attr("y", 0)
.attr("class", "legend")
.style("color", "#9bcf81")
.style("fill", "#9bcf81")
.style("cursor", "pointer")
.style("font-family", "cooperbook")
.on("click", function(){
// Determine if current line is visible
var active = sugarLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#sugarLine").style("opacity", newOpacity);
d3.selectAll("#sugarDots").style("opacity", newOpacity);
// Update whether or not the elements are active
sugarLine.active = active;
})
.text("Sugars");
//Add the carb title
svg.append("text")
.attr("x", 320)
.attr("y", 0)
.attr("class", "legend")
.style("color", "#efa465")
.style("fill", "#efa465")
.style("cursor", "pointer")
.style("font-family", "cooperbook")
.on("click", function(){
// Determine if current line is visible
var active = carbLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#carbLine").style("opacity", newOpacity);
d3.selectAll("#carbDots").style("opacity", newOpacity);
// Update whether or not the elements are active
carbLine.active = active;
})
.text("Carbohydrates");
});
谢谢！
推荐答案
这不是一个详尽的问题，它包含许多子问题，但我会尽力为您提供帮助.
This is not a granular question and consists of many sub-questions but I will do my best to be helpful.
首先，更改为:
function resize() {
// Set the dimensions of the canvas / graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = window.innerWidth - margin.left - margin.right,
height = window.innerHeight - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// rest of your code here
}
然后在调整窗口大小时调用该函数:
Then call the function when window is resized:
d3.select(window).on('resize', resize);
请记住，您需要在resize上重新绘制图表.现在，您将根据收到的新高度获得新的渲染.您还可以进行更多改进:缩放刻度，字体等.看看这个示例，它非常彻底:
remember that you need to redraw the chart on resizeNow you got new rendered based on the new heights you received. There are many more improvements you can make: scaling ticks, fonts and etc. Have a look at this example, it's very thorough: Building Responsive Visualizations with D3.js
这篇关于如何使D3折线图响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
