有問題的平移和縮放線圖

Question

我試圖建立這種趨勢部件能夠與d3.json獲取的數據進行縮放和平移由d3.json接收到的數據。首先，這裏是我的代碼：

<script> 

    var margin = { top: 20, right: 80, bottom: 20, left: 50 }, 
     width = $("#trendcontainer").width() - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var format = d3.time.format("%Y-%m-%d").parse; 
    var x = d3.time.scale() 
     .domain([-width/2, width/2]) 
     .range([0, width]); 

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

    var color = d3.scale.category10(); 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .tickSize(-height); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(5) 
     .tickSize(-width); 

    var zoom = d3.behavior.zoom() 
     .x(x) 
     .y(y) 
     .scaleExtent([1, 10]) 
     .on("zoom", zoomed); 

    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(".panel-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 + ")") 
     .call(zoom); 

    d3.json('@Url.Action("DataBlob", "Trend", new {id = Model.Unit.UnitId, runId = 5})', function(error, json) { 
     $('#processing').hide(); 
     color.domain(d3.keys(json[0]).filter(function(key) { 
      return key !== "Time" && key !== "Id"; 
     })); 

     data.forEach(function(d) { var date = new Date(parseInt(d.Time.substr(6))); d.Time = date; }); 

     var instruments = color.domain().map(function(name) { 
      return { 
       name: name, 
       values: data.map(function(d) { 
        return { 
         date: d.Time, 
         value: +d[name] 
        }; 
       }) 
      }; 
     }); 

     x.domain(d3.extent(data, function(d) { return d.Time; })); 
     y.domain([ 
      d3.min(instruments, function(c) { 
       return d3.min(c.values, function(v) { 
        return v.value; 
       }); 
      }), 
      d3.max(instruments, function(c) { 
       return d3.max(c.values, function(v) { 
        return v.value; 
       }); 
      }) 
     ]); 

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

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

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

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

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

     instrument.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; }); 
    }); 

    function zoomed() { 
     svg.select(".x.axis").call(xAxis); 
     svg.select(".y.axis").call(yAxis); 
     svg.select(".x.grid") 
      .call(make_x_axis() 
       .tickSize(-height, 0, 0) 
       .tickFormat("")); 
     svg.select(".y.grid") 
      .call(make_y_axis() 
       .tickSize(-width, 0, 0) 
       .tickFormat("")); 
     svg.select(".line") 
      .attr("class", "line") 
      .attr("d", line); 
    }; 

    var make_x_axis = function() { 
     return d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 
      .ticks(5); 
    }; 

    var make_y_axis = function() { 
     return d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .ticks(5); 
    }; 

</script> 

這裏的問題在於變焦/平移不與我行進行互動。只是保持不變，在可縮放/可平移的網格下面。此外，其中一條線路試圖放大/出鍋時消失，我的控制檯說以下內容： Error: Problem parsing d="" - 指的是下面的代碼片段，最後一行：

function zoomed() { 
    svg.select(".x.axis").call(xAxis); 
    svg.select(".y.axis").call(yAxis); 
    svg.select(".x.grid") 
     .call(make_x_axis() 
      .tickSize(-height, 0, 0) 
      .tickFormat("")); 
    svg.select(".y.grid") 
     .call(make_y_axis() 
      .tickSize(-width, 0, 0) 
      .tickFormat("")); 
    svg.select(".line") 
     .attr("class", "line") 
     .attr("d", line); 
}; 

下面是從控制器的json結果的內容：

[{"Weight":0.0,"Speed":59.9,"Depth":362.24000,"Time":"2014-04-09T10:01:23","Id":0},{"Weight":10.0,"Speed":59.9,"Depth":394.07000,"Time":"2014-04-09T10:01:56","Id":1},{"Weight":971.0,"Speed":70.1,"Depth":425.84650,"Time":"2014-04-09T10:02:28","Id":2},{"Weight":0.0,"Speed":-29.9,"Depth":422.07465,"Time":"2014-04-09T10:03:00","Id":3},{"Weight":1321.0,"Speed":-21.6,"Depth":406.32840,"Time":"2014-04-09T10:03:32","Id":4},{"Weight":-6.0,"Speed":-30.0,"Depth":390.57880,"Time":"2014-04-09T10:04:04","Id":5},{"Weight":3.0,"Speed":59.9,"Depth":404.50380,"Time":"2014-04-09T10:04:36","Id":6},{"Weight":609.0,"Speed":59.9,"Depth":435.79380,"Time":"2014-04-09T10:05:08","Id":7},{"Weight":1.0,"Speed":59.9,"Depth":467.95280,"Time":"2014-04-09T10:05:40","Id":8},{"Weight":-2149.0,"Speed":34.6,"Depth":498.61060,"Time":"2014-04-09T10:06:12","Id":9},{"Weight":2.0,"Speed":59.9,"Depth":529.83060,"Time":"2014-04-09T10:06:44","Id":10}] 

趨勢看起來像這樣在我看來現在，但實際的行不縮放或平移。只有覆蓋網格（黑線）的確如此;

爲了簡單起見，我認爲剛開始時，遵循原始示例here，但我真的很難將json加載的數據放入此處。 希望有人能幫助我想出解決辦法:)

Answer 1

感謝拉爾斯，我終於能夠解決這個問題。最終，我不得不做一些改變，我除了控制器使用this fiddle設置域之後的標度，以分配給變焦的行爲，所以它返回一個JSON字符串我的看法是這樣的：

string json = JsonConvert.SerializeObject(Model.Trend.ToArray()); 

return Json(json, JsonRequestBehavior.AllowGet); 

這是由於在返回視圖時沒有被序列化返回的數組上的縮放/平移時出現一些錯誤。

也不得不做以下爲它工作：

d3.json('@Url.Action("DataBlob", "Trend", new {id = Model.Unit.UnitId, runId = 5})', function(error, tmparray) { 
    var json = JSON.parse(tmparray); 
    ... 
    )}; 

如果跳過此步驟，我的數據將無法正確顯示由於某種原因，被擠壓到我圖的左側。