Javascript 流图：两个问题_Javascript_Graph_Charts_D3.js_Stream Graph

Javascript 流图：两个问题

javascript graph charts d3.js

Javascript 流图：两个问题,javascript,graph,charts,d3.js,stream-graph,Javascript,Graph,Charts,D3.js,Stream Graph,我一直在玩D3.js，我正在尝试使用实时数据制作流图可视化这篇文章我确实读了很多我也读了这个问题和答案但这是一条线。我有一个d3.svg.area对象然后我读了这篇文章但仍然找不到任何答案我的两个问题：在绘制流式图形时，我注意到图形总是设置在底部。每次刷新时，计算函数都会找到最大数据量，并在绘制图形的元素底部设置图形的底部 var area = d3.svg.area() .x(function(data) { return data.x * width / Xmaxim

我一直在玩D3.js，我正在尝试使用实时数据制作流图可视化

这篇文章我确实读了很多

我也读了这个问题和答案但这是一条线。我有一个d3.svg.area对象

然后我读了这篇文章但仍然找不到任何答案

我的两个问题：

在绘制流式图形时，我注意到图形总是设置在底部。每次刷新时，计算函数都会找到最大数据量，并在绘制图形的元素底部设置图形的底部

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>


测试可视化
.线路{
填充：无；
行程：#000；
笔划宽度：1.5px；
}
.轴路径，.轴线{
左边距：30px；
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
svg{
字体：10px无衬线；
}
#重新启动{
可见性：隐藏；
}
#视觉{
左边距：70像素；
//边框：5px纯黑；
宽度：900px；
高度：500px；
}
var=100；
变量层数=4；
var样本数量=50；
var margin={顶部：6，右侧：0，底部：6，左侧：40}；
var宽度=900-边距。右侧；
变量高度=500-margin.top-margin.bottom；
var Xmaximum=样本数-1；
var Ymaximum=CONS*层数；
var initial_table=新数组（）；
对于（变量i=0；i