Fatal编程技术网
  • jquery/
  • Jquery 使用自动滚动在div中添加d3图例

Jquery 使用自动滚动在div中添加d3图例

jquery d3.js

Jquery 使用自动滚动在div中添加d3图例,jquery,d3.js,legend,Jquery,D3.js,Legend,我想在div中添加图例，以便在散点图数量增加时自动滚动。下面是我的示例代码 <!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=

我想在div中添加图例，以便在散点图数量增加时自动滚动。下面是我的示例代码

<!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>


.轴线路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
.y1{
填充物：白色；
笔画：橙色；
笔划宽度：1.5px；
}
.y2{
填充物：白色；
笔画：红色；
笔划宽度：1.5px；
}
.y3{
填充物：白色；
笔画：钢蓝；
笔划宽度：1.5px；
}
.线路{
填充：无；
笔划宽度：1.5px；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：50px；
高度：10px；
填充物：5px；
字体：10px无衬线；
背景：白烟；
边框：实心1px#aaa；
指针事件：无；
盒影：2px 2px 1px#888；
}
.legend1{
宽度：45px；
高度：5px；
填充：0px；
溢出：自动；
字体：10px无衬线；
背景：黄色；
边框：1px实心#bbb；
背景色：#中交；
盒影：2px 2px 1px#888；
}
.头衔{
字体：13px无衬线；
}
//宽度和高度
var w=500；
var h=500；//海图高度
var=50；
var now=d3.time.hour.utc（新日期）；
变量数据集=[
[ 
{x:d3.time.hour.utc.offset（现在是-5），y:0}，
{x:d3.time.hour.utc.offset（现在是-4），y:0}，
{x:d3.time.hour.utc.offset（现在是-3），y:2}，
{x:d3.time.hour.utc.offset（现在是-2），y:0}，
{x:d3.time.hour.utc.offset（现在是-1），y:0}，
{x:now，y:0}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:3}，
{x:d3.time.hour.utc.offset（现在是-4），y:1}，
{x:d3.time.hour.utc.offset（现在是-3），y:3}，
{x:d3.time.hour.utc.offset（现在是-2），y:1}，
{x:d3.time.hour.utc.offset（现在是-1），y:5}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:3}，
{x:d3.time.hour.utc.offset（现在是-4），y:5}，
{x:d3.time.hour.utc.offset（现在是-3），y:2}，
{x:d3.time.hour.utc.offset（现在是-2），y:1}，
{x:d3.time.hour.utc.offset（现在是-1），y:7}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:5}，
{x:d3.time.hour.utc.offset（现在是-4），y:2}，
{x:d3.time.hour.utc.offset（现在是-3），y:3}，
{x:d3.time.hour.utc.offset（现在是-2），y:4}，
{x:d3.time.hour.utc.offset（现在是-1），y:6}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:1}，
{x:d3.time.hour.utc.offset（现在是-4），y:2}，
{x:d3.time.hour.utc.offset（现在是-3），y:3}，
{x:d3.time.hour.utc.offset（现在是-2），y:4}，
{x:d3.time.hour.utc.offset（现在是-1），y:5}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:5}，
{x:d3.time.hour.utc.offset（现在是-4），y:4}，
{x:d3.time.hour.utc.offset（现在是-3），y:3}，
{x:d3.time.hour.utc.offset（现在是-2），y:2}，
{x:d3.time.hour.utc.offset（现在是-1），y:1}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:0}，
{x:d3.time.hour.utc.offset（现在是-4），y:2}，
{x:d3.time.hour.utc.offset（现在是-3），y:4}，
{x:d3.time.hour.utc.offset（现在是-2），y:6}，
{x:d3.time.hour.utc.offset（现在是-1），y:8}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:8}，
{x:d3.time.hour.utc.offset（现在是-4），y:9}，
{x:d3.time.hour.utc.offset（现在是-3），y:7}，
{x:d3.time.hour.utc.offset（现在是-2），y:6}，
{x:d3.time.hour.utc.offset（现在是-1），y:5}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:3}，
{x:d3.time.hour.utc.offset（现在是-4），y:2}，
{x:d3.time.hour.utc.offset（现在是-3），y:1}，
{x:d3.time.hour.utc.offset（现在是-2），y:0}，
{x:d3.time.hour.utc.offset（现在是-1），y:5}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:5}，
{x:d3.time.hour.utc.offset（现在是-4），y:8}，
{x:d3.time.hour.utc.offset（现在是-3），y:2}，
{x:d3.time.hour.utc.offset（现在是-2），y:1}，
{x:d3.time.hour.utc.offset（现在是-1），y:6}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:8}，
{x:d3.time.hour.utc.offset（现在是-4），y:6}，
{x:d3.time.hour.utc.offset（现在是-3），y:4}，
{x:d3.time.hour.utc.offset（现在是-2），y:2}，
{x:d3.time.hour.utc.offset（现在是-1），y:0}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:1}，
{x:d3.time.hour.utc.offset（现在是-4），y:0}，
{x:d3.time.hour.utc.offset（现在是-3），y:2}，
{x:d3.time.hour.utc.offset（现在是-2），y:3}，
{x:d3.time.hour.utc.offset（现在是-1），y:2}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:6}，
{x:d3.time.hour.utc.offset（现在是-4），y:4}，
{x:d3.time.hour.utc.offset（现在是-3），y:8}，
{x:d3.time.hour.utc.offset（现在是-2），y:3}，
{x:d3.time.hour.utc.offset（现在是-1），y:2}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:1}，
{x:d3.time.hour.utc.offset（现在是-4），y:3}，
{x:d3.time.hour.utc.offset（现在是-3），y:6}，
{x:d3.time.hour.utc.offset（现在是-2），y:9}，
{x:d3.time.hour.utc.offset（现在是-1），y:5}，
{x:now，y:1}
],
[
{x:d3.time.hour.utc.offset（现在是-5），y:8}，
{x:d3.time.hour.utc.offset（现在是-4），y:5}，
{x:d3.time.hour.utc.offset（现在是-3），y:0}，
{x:d3.time.hour.utc.offset（现在是-2），y:2}，

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



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

.chart {
     float: left;
       }



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);