在自動滾動的div中添加d3傳說

我想在div中添加圖例，以便在散點圖數量增加時自動滾動。下面是我的示例代碼在自動滾動的div中添加d3傳說

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 
    <style type="text/css"> 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: black; 
      shape-rendering: crispEdges; 
     } 

     .axis text { 
      font-family: sans-serif; 
      font-size: 11px; 
     } 

     .y1 { 
      fill: white; 
      stroke: orange; 
      stroke-width: 1.5px; 
     } 

     .y2 { 
      fill: white; 
      stroke: red; 
      stroke-width: 1.5px; 
     } 

     .y3 { 
      fill: white; 
      stroke: steelblue; 
      stroke-width: 1.5px; 
     } 

     .line { 
      fill: none; 
      stroke-width: 1.5px; 
     } 

     div.tooltip { 
      position: absolute; 
      text-align: center; 
      width: 50px; 
      height: 10px; 
      padding: 5px; 
      font: 10px sans-serif; 
      background: whiteSmoke; 
      border: solid 1px #aaa; 
      pointer-events: none; 
      box-shadow: 2px 2px 1px #888; 
     } 

     .legend1 { 
      width:45px; 
      height: 5px; 
      padding: 0px; 
      overflow: auto; 
      font: 10px sans-serif; 
      background: yellow; 
      border: 1px solid #bbb; 
      background-color: #cccccc; 
      box-shadow: 2px 2px 1px #888; 
     } 

     .title { 
      font: 13px sans-serif; 
     } 

    </style> 
</head> 
<body> 
</div> 
    <script type="text/javascript"> 

//Width and height 
var w = 500; 
var h = 500; // chart height 
var padding = 50; 

var now = d3.time.hour.utc(new Date); 

var dataset = [ 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 0}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 0}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 0}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 0}, 
     {x: now, y: 0} 
    ], 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 3}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 1}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 1}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
     {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 5}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 7}, 
    {x: now, y: 1} 
    ], 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 5}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 6}, 
     {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 5}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 4}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 1}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 0}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 4}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 6}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 8}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 8}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 9}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 7}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 6}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 0}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 5}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 8}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 6}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 8}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 6}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 4}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 0}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 0}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 2}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 6}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 4}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 8}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 2}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 3}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 6}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 9}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
    {x: now, y: 1} 
    ], 
    [ 
    {x: d3.time.hour.utc.offset(now, -5), y: 8}, 
    {x: d3.time.hour.utc.offset(now, -4), y: 5}, 
    {x: d3.time.hour.utc.offset(now, -3), y: 0}, 
    {x: d3.time.hour.utc.offset(now, -2), y: 2}, 
    {x: d3.time.hour.utc.offset(now, -1), y: 3}, 
    {x: now, y: 1} 
    ], 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 4}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 1}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 3}, 
     {x: now, y: 1} 
    ] 
]; 

var color_hash = { 0 : ["A", "red"], 
        1 : ["B", "green"], 
        2 : ["C", "Yellow"], 
        3 : ["D", "orange"], 
        4 : ["F", "blue"], 
        5 : ["G", "pink"], 
        6 : ["H", "grey"], 
        7 : ["I", "purple"], 
        8 : ["J", "Coral"], 
        9 : ["K", "Crimson"], 
        10 : ["L", "DarkOliveGreen"], 
        11 : ["M", "DarkSeaGreen"], 
        12 : ["N", "DarkRed"], 
        13 : ["O", "DarkKhaki"], 
        14 : ["P", "Chocolate"], 
        15 : ["Q", "Black"] 

        }      

// Define axis ranges & scales   
var yExtents = d3.extent(d3.merge(dataset), function (d) { return d.y; }); 
var xExtents = d3.extent(d3.merge(dataset), function (d) { return d.x; }); 

var xScale = d3.time.scale() 
     .domain([xExtents[0], xExtents[1]]) 
     .range([padding, w - padding * 2]); 

var yScale = d3.scale.linear() 
     .domain([0, yExtents[1]]) 
     .range([h - padding, padding]); 


// Create SVG element 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 


// Define lines 
var line = d3.svg.line() 
     .x(function(d) { return x(d.x); }) 
     .y(function(d) { return y(d.y1, d.y2, d.y3); }); 

var pathContainers = svg.selectAll('g.line') 
.data(dataset); 

pathContainers.enter().append('g') 
.attr('class', 'line') 
.attr("style", function(d) { 
    return "stroke: " + color_hash[dataset.indexOf(d)][1]; 
}); 

pathContainers.selectAll('path') 
.data(function (d) { return [d]; }) // continues the data from the pathContainer 
.enter().append('path') 
    .attr('d', d3.svg.line() 
    .x(function (d) { return xScale(d.x); }) 
    .y(function (d) { return yScale(d.y); }) 
); 

// add circles 
pathContainers.selectAll('circle') 
.data(function (d) { return d; }) 
.enter().append('circle') 
.attr('cx', function (d) { return xScale(d.x); }) 
.attr('cy', function (d) { return yScale(d.y); }) 
.attr('r', 3); 

//Define X axis 
var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom") 
     .ticks(5); 

//Define Y axis 
var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left") 
     .ticks(5); 

//Add X axis 
svg.append("g") 
.attr("class", "axis") 
.attr("transform", "translate(0," + (h - padding) + ")") 
.call(xAxis); 

//Add Y axis 
svg.append("g") 
.attr("class", "axis") 
.attr("transform", "translate(" + padding + ",0)") 
.call(yAxis); 

// Add title  
svg.append("svg:text") 
     .attr("class", "title") 
    .attr("x", 20) 
    .attr("y", 20) 
    .text("Fruit Sold Per Hour"); 

/* var legend = d3.select("body").append("div") 
    .attr("class", "legend") 
    .attr('transform', 'translate(-20,50)'); */ 
// add legend 
var legend = svg.append("g") 
        .attr("class", "legend1") 
        .attr('transform', 'translate(-20,50)')  


legend.selectAll('rect') 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr("x", w - 75) 
    .attr("y", function(d, i){ return i * 20;}) 
    .attr("width", 5) 
    .attr("height", 5) 
    .style("fill", function(d) { 
    var color = color_hash[dataset.indexOf(d)][1]; 
    return color; 
    }) 

legend.selectAll('text') 
    .data(dataset) 
    .enter() 
    .append("text") 
    .attr("x", w - 65) 
    .attr("width", 5) 
    .attr("height", 5) 
    .attr("y", function(d, i){ return i * 20 + 5;}) 
    .text(function(d) { 
    var text = color_hash[dataset.indexOf(d)][0]; 
    return text; 
    }); 


    </script> 
</body>

如何把傳說中的div與指定hieght和寬度與滾動時的系列數量的增加

來源

2014-02-21 sush

我不確定你的意思是「當系列數量增加時滾動」，請更具體一些。你的意思是說，如果你有更多的系列比頁面高度可以容納，它就變成可滾動的了。 – Mosho

當我將圖表高度從500減少到200時，我只能看到圖表右側的7個傳說。多數民衆贊成的原因，我想添加圖例中的圖例部分，以便它甚至可以獲得汽車滾動圖表高度更少 – sush

你可以將圖表和圖例爲解決這個兩個單獨的<div>'s。

首先，我們將其加入：

<body> 
    <div id="chart" class="chart"></div> 
    <div id="legend" class="legend"></div> 
</body>

其次，我們將設置自己的風格（我手動做的，但在這裏，你可以使用你的腳本setAttribute(...)）。

.legend { 
     overflow: auto; 
     height: 200px; 
     width: 50px; 
     } 

.chart { 
    float: left; 
     }

設置overflow: auto是什麼使div可滾動。 float: left使<div>的顯示並排。

最後，我們將通過爲每個div創建svg元素來更改d3腳本以反映此情況。

var svg = d3.select("#chart") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 

var svg2 = d3.select("#legend") 
    .append("svg") 
    .attr("width", 30) 
    .attr("height", 20*dataset.length);

您可以看到結果here。

來源

2014-02-21 05:56:05 Mosho

嗨Mosho，解決方案，你給樣品的例子工作正常，但是當我在我的項目中應用相同的東西，它不顯示圖例顏色和值 – sush

但我可以看到值時，我檢查了螢火蟲控制檯 – sush

它只顯示滾動條在瀏覽器上的div – sush

在自動滾動的div中添加d3傳說

回答

相關問題