Question

这是我的代码。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .chart rect {
  fill:#98abc5 ;

}

.chart2 rect {
  fill:#8a89a6 ;

}

.chart3 rect {
  fill:#7b6888 ;

}

.chart4 rect {
  fill:#6b486b ;

}

.chart5 rect {
  fill:#a05d56 ;

}

.chart6 rect {
  fill:#d0743c ;

}

.chart7 rect {
  fill:#ff8c00 ;

}



.chart {
  position: absolute;   
}



.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var data = [4, 8, 15, 78, 100, 90];
var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 70);




var data = [10, 30, 20, 1000, 9, 500];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 70 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 70);

var data = [500, 100, 60, 20, 1000, 9];

var width = 420,
    barHeight = 80;

var chart = d3.select(".chart3")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 70);



}//]]>  

</script>


</head>
<body>
  <svg class="chart"></svg>
<svg class = "chart2"></svg>
<svg class = "chart3"></svg>
<svg class = "chart4"></svg>
<svg class = "chart5"></svg>
<svg class = "chart6"></svg>
<svg class = "chart7"></svg>

</body>
</html>

正如你所看到的，第3起它将分别出现。我想用7个不同的条形创建组条形图。我现在正处于第3位。

Answer 1

它是单独出现的，因为带有类map2的svg标签不是绝对定位的。如果您按如下方式添加css规则，它会起作用：

.chart2, .chart3, .chart4, .chart5, .chart6, .chart7{
    position: absolute;
}

但请注意，您当前的方法并非通用，您最终需要创建特定的svg标记并重复条形图创建代码。

请参阅分组栏示例：http://bl.ocks.org/mbostock/3887051

团体酒吧，从第3起开始分开

1 个答案: