Question

我想在同一个HTML页面上放置两个条形图，但我想为每个条形图定义两种不同的样式（条形填充和条形：悬停填充）。现在，我得到两个黑色的图表，并悬停在财产上已经消失。我错过了什么？

<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000000;
shape-rendering: crispEdges;
}
.barchart1bar {
fill:  #6AA4FF;
}
.barchart1bar:hover {
fill: #DC143C;
}
.x.axis path {
display: none;
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000000;
shape-rendering: crispEdges;
}
.barchart2bar {
fill:  #00FFFF;
}
.barchart2bar:hover {
fill: #FFDEAD;
}
.x.axis path {
display: none;
}
</style>
</head>
<div class="row">
<div class="barchart1" id="areabarchart1"></div>
</div>
<div class="row">
<div class="barchart2" id="areabarchart2"></div>
</div>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js">    </script>
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

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

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var barchart1 = d3.select("#areabarchart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var barchart1barData =
[{ "name": "A", "value": 0.02951 }, { "name": "B", "value": 0.06686 }, { "name": "C", "value": 0.08855 }, { "name": "D", "value": 0.03061 }, { "name": "E", "value": 0.09295 }, { "name": "F", "value": 0.04163 }, { "name": "G", "value": 0.03507 }, { "name": "H", "value": 0.05032 }, { "name": "I", "value": 0.04914 }, { "name": "J", "value": 0.09186 }, { "name": "K", "value": 0.11872 }, { "name": "L", "value": 0.05006 }, { "name": "M", "value": 0.08107 }, { "name": "N", "value": 0.04226 }, { "name": "O", "value": 0.03275 }, { "name": "P", "value": 0.06763 }, { "name": "Q", "value": 0.03534 }, { "name": "R", "value": 0.07308 }, { "name": "S", "value": 0.11514 }];


x.domain(barchart1barData.map(function (d) { return d.name; }));
y.domain([0, d3.max(barchart1barData, function (d) { return d.value; })]);


barchart1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);


barchart1.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");


barchart1.selectAll("barchart1bar")
.data(barchart1barData)
.enter().append("rect")
.attr("class", ".barchart1bar")
.attr("x", function (d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.value); })
.attr("height", function (d) { return height - y(d.value); })


function type(d) {
d.value = +d.value;
return d;
}
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

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

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var barchart2 = d3.select("#areabarchart2").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var barchart2barData =
[{ "name": "A", "value": 0.02951 }, { "name": "B", "value": 0.06686 }, { "name": "C", "value": 0.08855 }, { "name": "D", "value": 0.03061 }, { "name": "E", "value": 0.09295 }, { "name": "F", "value": 0.04163 }, { "name": "G", "value": 0.03507 }, { "name": "H", "value": 0.05032 }, { "name": "I", "value": 0.04914 }, { "name": "J", "value": 0.09186 }, { "name": "K", "value": 0.11872 }, { "name": "L", "value": 0.05006 }, { "name": "M", "value": 0.08107 }, { "name": "N", "value": 0.04226 }, { "name": "O", "value": 0.03275 }, { "name": "P", "value": 0.06763 }, { "name": "Q", "value": 0.03534 }, { "name": "R", "value": 0.07308 }, { "name": "S", "value": 0.11514 }];


x.domain(barchart2barData.map(function (d) { return d.name; }));
y.domain([0, d3.max(barchart2barData, function (d) { return d.value; })]);


barchart2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);


barchart2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");


 barchart2.selectAll("barchart2bar")
.data(barchart2barData)
.enter().append("rect")
.attr("class", ".barchart2bar")
.attr("x", function (d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.value); })
.attr("height", function (d) { return height - y(d.value); })


function type(d) {
d.value = +d.value;
return d;
}
</script>
</body>

任何想法我在这里错过了什么？

Answer 1

您忘记在图表中添加班级名称。 d3.select("#areabarchart1").append("svg").classed('barchart1bar', true)和d3.select("#areabarchart2").append("svg").classed('barchart2bar', true)可以做到这一点。

Answer 2

您正在寻找的是CSS selectors。试试这个。

select row_count();

将多个d3图表放在同一页面上，但应用不同的样式

2 个答案: