卡住D3 V3縮放行爲文檔

Question

我是D3庫的新手，我在圖形上縮放。

我在幾張圖上正確顯示了我的數據。但是當我縮放時，一切都出錯了。我不知道如果我錯過了域或範圍或任何東西......所以我問。

你可以找到我的代碼在這裏演示：http://pastehtml.com/view/cos13vodt.html

這裏是的jsfiddle例如：http://jsfiddle.net/84mSQ/

而我的JS代碼有：

var margin = {top: 30, right: 150, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

//To parse dates as they are into the CSV 
var parseDate = d3.time.format("%Y/%m/%d-%H:%M").parse; 

var format = d3.time.format("%d/%m/%y-%H:%M"); 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left")/*.ticks(30)*/; 

var zoom = d3.behavior.zoom() 
    .x(x) 
    .scaleExtent([1, 2]) 
    .on("zoom", function(scale, translate){ 
     console.log("fonction zoom"); 
     console.log(scale); console.log(translate); 
     zoomed(scale, translate); 
    }); 

// A line generator. 
var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 


var svg = d3.select("body") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("svg:g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom); 

svg.append("rect") 
    .attr("class", "pane") 
    .attr("width", width) 
    .attr("height", height); 

// Get the data 
d3.csv("./enregistrement-subset2.csv", function(data) { 
    color.domain(d3.keys(data[0]) 
    .filter(function(key) { 
     return key !== "date" && key !== "ECS - Button A" ; 
    })); 

    data.forEach(function(d) { 
     //Parse the date 
     d.date = parseDate(d.date); 
    }); 

    var dataSet = color.domain().map(function(name) { 

     return { 
      name: name, 
      values: data.map(function(d) { 
       //parses the number by using the '+' operator 
       if(name == "CO2 chambre"){ 
        return { date: d.date, value: (+d[name])/10}; 
       } 
       else{ 
        return { date: d.date, value: +d[name]}; 
        } 
      }) 
     }; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([ 
     d3.min(dataSet, function(c) { var mini = d3.min(c.values, function(v) { return v.value; }); return mini; }), 
     d3.max(dataSet, function(c) { var maxi = d3.max(c.values, function(v) { return v.value; }); return maxi; }) 
     ]); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Value of"); 

    var valueSet = svg.selectAll(".valueSet") 
      .data(dataSet) 
     .enter().append("g") 
      .attr("class", "valueSet"); 

    valueSet.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { return color(d.name); }) 
     .call(line); 

    valueSet.append("text") 
     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
     .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.value) + ")"; }) 
     .attr("x", 3) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name; }); 

    //zoomed(); 

}); 

function zoomed() { 
    console.log("here", d3.event); 

    svg.select("g.x.axis").call(xAxis); 
    svg.select("g.y.axis").call(yAxis); 
    //svg.selectAll("path.line").call(line); 
    svg.selectAll("path.line").attr("d", line); 
    //d3.select("#footer span").text("Période de temps: " + x.domain().map(format).join("-")); 
} 

任何人能告訴我是什麼這個代碼我做錯了嗎？

我應該重新設計嗎？

如果我使用大量數據並且我應該怎麼做，是否有性能問題需要預覽？

Answer 1

這可能是有用的，可與最新版本的D3的： http://bl.ocks.org/3892928

Answer 2

var zoom = d3.behavior.zoom() 
    .x(x) 
    **.scaleExtent([1, 2])** <--- 
    .on("zoom", function(scale, translate){ 
     console.log("fonction zoom"); 
     console.log(scale); console.log(translate); 
     zoomed(scale, translate); 
    }); 

取出.scaleExtent（[1，2]），並檢查其是否工作

---

應該

var zoom = d3.behavior.zoom() 
    .x(x) 
    .on("zoom", function(scale, translate){ 
     console.log("fonction zoom"); 
     console.log(scale); console.log(translate); 
     zoomed(scale, translate); 
    }); 

這是因爲你的X軸是時間。