如何使D3折線圖響應

Question

我是使用D3圖表的新手，但在使多折線圖響應時遇到問題。 我已經查看了一些有關如何使D3響應的示例，但是我無法使其在我的圖表上起作用。 如果有人可以幫助我制作我目前具有響應能力的代碼，我將非常感激。

這是代碼：

    // 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");
 });

謝謝！

Answer 1

這不是一個詳盡的問題，它包含許多子問題，但我會盡力為您提供幫助。

首先，更改為：

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
}

然后在調整窗口大小時調用該函數：

d3.select(window).on('resize', resize); 

請記住，您需要在resize上重繪圖表。現在您將根據收到的新高度獲得新的渲染。 您還可以進行更多改進：縮放刻度，字體等。看一下這個示例，它非常徹底： 用D3.js構建響應式可視化