流式图：两个问题

我一直在玩D3.js，我正在尝试使用实时数据进行流式图可视化。流式图：两个问题

我做研究非常这篇文章 http://bost.ocks.org/mike/path/

我也看了这个问题和答案 Svg clip-path within rectangle does not work 但这是一条线。我有一个d3.svg.area对象

然后我读这篇文章 D3 Real-Time streamgraph (Graph Data Visualization) 但还是没能找到任何答案

我的两个问题：绘制流图表时

，我注意到图形总是设置在底部。每刷新一个计算函数，找到数据的最大值，并将图形底部设置在绘制图形的元素底部。

var area = d3.svg.area() 
    .x(function(data) { return data.x * width/Xmaximum; }) 
    .y0(function(data) { return height - data.y0 * height/Ymaximum; }) 
    .y1(function(data) { return height - (data.y + data.y0) * height/Ymaximum; });

我该怎么做才能让在轴中间的图形？我想我必须玩弄区域的x，y0和y1，但究竟如何？

如果您尝试我的代码，图的一部分显示在左侧。我知道有一些错误：

vis.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

vis.append("g") 
    .attr("clip-path", "url(#clip)");

我搜索在其他主题和各地网络任何回应，但我一直坚持在这里！

这里是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test visu</title> 
    <style> 
     .line { 
      fill: none; 
      stroke: #000; 
      stroke-width: 1.5px; 
     } 
     .axis path, .axis line { 
      margin-left: 30px; 
      fill: none; 
      stroke: #000; 
      shape-rendering: crispEdges; 
     } 
     svg { 
      font: 10px sans-serif; 
     } 

     #restart{ 
      visibility: hidden; 
     } 

     #visu{ 
      margin-left: 70px; 
      //border: 5px solid black; 
      width: 900px; 
      height: 500px; 
     } 

    </style> 
</head> 

<body> 
    <div id="visu"> 
     <script src="http://mbostock.github.com/d3/d3.js?2.7.2"></script> 
      var CONS = 100; 

      var layers_number = 4; 
      var samples_number = 50; 

      var margin = {top: 6, right: 0, bottom: 6, left: 40}; 
      var width = 900 - margin.right; 
      var height = 500 - margin.top - margin.bottom; 

      var Xmaximum = samples_number - 1; 
      var Ymaximum = CONS * layers_number; 

      var initial_table = new Array(); 

      for (var i = 0 ; i < layers_number ; ++i){ 
       initial_table[i] = new Array(); 
       for (var j = 0 ; j < samples_number ; ++j){ 
        initial_table[i][j] = randomNber(); 
       } 
      } 

      var values = new Array(); 
      for (var i = 0 ; i < layers_number ; ++i) 
       values[i] = new Array(); 

      var data0 = d3.layout.stack().offset("wiggle")(init_layers(layers_number,samples_number)); 

      function color (indice){ 
       if (indice == 0) 
        return "green"; 
       else if (indice == 1) 
        return "blue"; 
       else if (indice == 2) 
        return "red"; 
       else if (indice == 3) 
        return "black"; 
       return "black"; 
      } 

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

      var area = d3.svg.area() 
       .x(function(data) { return data.x * width/Xmaximum; }) 
       .y0(function(data) { return height - data.y0 * height/Ymaximum; }) 
       .y1(function(data) { return height - (data.y + data.y0) * height/Ymaximum; }); 

      var vis = d3.select("div") 
       .append("svg") 
        .style("margin-left", -margin.left + "px") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      vis.append("defs").append("clipPath") 
        .attr("id", "clip") 
       .append("rect") 
        .attr("width", width) 
        .attr("height", height); 

      vis.append("g") 
       .attr("clip-path", "url(#clip)"); 

      vis.selectAll("path") 
       .data(data0) 
       .enter() 
       .append("path") 
       .style("fill", function(data, indice) { return color(indice); }) 
       .attr("d", area); 

      vis.append("g") 
       .attr("class", "y axis") 
        .call(d3.svg.axis().scale(y).ticks(5).orient("left")); 

      transition(); 

      function transition() { 
       data0 = d3.layout.stack().offset("wiggle")(update_layers(layers_number,samples_number)); 

       vis.selectAll("path") 
        .data(data0) 
        .attr("d", area) 
        .attr("transform", null) 
        .transition() 
        .duration(860) 
        .ease("linear") 
        .attr("transform", "translate(" + -(width/samples_number) + ")") 
        .each("end", function (data,indice) { 
         if (indice==0) transition(); 
        }); 

       for (var i = 0 ; i < values.length ; ++i) 
        values[i].shift(); 
      } 

      function init_layers(layers_number, samples_number) { 
       return d3.range(layers_number).map(function(data,indice) { 
        for (var i = 0 ; i < samples_number ; i++) 
         values[indice][i] = initial_table[indice][i]; 
        return values[indice].map(stream_index); 
       }); 
      } 

      function update_layers(layers_number, samples_number) { 
       return d3.range(layers_number).map(function(data,indice) { 
        values[indice][samples_number] = randomNber(); 
        return values[indice].map(stream_index); 
       }); 
      } 

      function stream_index(data, indice) { 
       return {x: indice, y: Math.max(0, data)}; 
      } 

      function randomNber(){ 
       return parseInt(Math.random()*100)+1; 
      } 

    </div> 
</body> 
</html>

来源

2012-05-18 ahebert

定心流的问题 - 使用堆栈布局的偏置特点：

https://github.com/mbostock/d3/wiki/Stack-Layout#wiki-offset

来源

2012-05-21 18:37:27 Josh

我试过！ 'var data0 = d3.layout.stack（）。offset（“silhouette”）（init_layers（layers_number，samples_number））;' 但问题来自该区域，而不是数据 – ahebert

流式图：两个问题

回答

相关问题