Как сделать диаграмму D3 Ответственный

Я новичок в использовании диаграмм D3, и у меня проблема, из-за чего моя многострочная диаграмма реагирует. Я рассмотрел несколько примеров того, как сделать 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"); 
});

Спасибо!

источник

2015-11-20 Ana

Это не гранулированный вопрос и состоит из многих вопросов, но я сделаю все возможное, чтобы быть полезным.

Во-первых, изменение:

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);

помните, что вам нужно перерисовывать диаграмму на resizeNow вы получили новый оказанных на основе новые высоты, которые вы получили. Есть еще много улучшений, которые вы можете сделать: масштабирование тиков, шрифтов и т. Д. Взгляните на этот пример, это очень тщательно: Building Responsive Visualizations with D3.js

источник

2015-11-20 15:12:22 ambodi

Как сделать диаграмму D3 Ответственный

ответ

Смежные вопросы