如何使饼图和条形图未选中的部分变灰？
我正在尝试通过以下示例进行练习： 在此处输入链接描述
上面的链接显示当我在饼图中选择2011年时，其他都是灰色的。但是我的代码没有成功。
该示例完美运行，如下所示：
我下面的代码无法像示例所示那样使饼图和条形图的未选择部分变灰：
<!DOCTYPE html>
<html>
<head>
<title>dc.js - Removing Empty Bars</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/kevinkraus92/cc5ac08b30c244e54e2c96bbe5fea110/raw/608ea6bc5564c9705a6b3c41281b5dddc84b8879/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="https://raw.githubusercontent.com/dc-js/dc.js/develop/web-src/examples/header.js"></script>
<p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove
the empty bars of an ordinal bar chart when their values drop to zero.</p>
<p>(Note the use of <code><a href="https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#elasticX">.elasticX(true)</a></code>
to force calculation of the X domain each round.)</p>
<div id="chart-ring-year"></div>
<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.1/dc.js"></script>
<script type="text/javascript">
var yearRingChart = new dc.PieChart("#chart-ring-year"),
spendHistChart = new dc.BarChart("#chart-hist-spend"),
spenderRowChart = new dc.RowChart("#chart-row-spenders");
];
// normalize/parse data
spendData.forEach(function(d) {
d.Spent = d.Spent.match(/\d+/);
});
有什么想法吗？谢谢。
潇湘沐1回答
-
波斯汪
使用 dc.js 的 CSS 可以获得相同的效果。如果您想为其设置样式，请使用该 CSS 作为起点。<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/><!DOCTYPE html><html><head> <title>dc.js - Removing Empty Bars</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/></head><body><div class="container"><script type="text/javascript" src="https://raw.githubusercontent.com/dc-js/dc.js/develop/web-src/examples/header.js"></script> <p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove the empty bars of an ordinal bar chart when their values drop to zero.</p> <p>(Note the use of <code><a href="https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#elasticX">.elasticX(true)</a></code> to force calculation of the X domain each round.)</p><div id="chart-ring-year"></div><div id="chart-hist-spend"></div><div id="chart-row-spenders"></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.1/dc.js"></script><script type="text/javascript">var yearRingChart = new dc.PieChart("#chart-ring-year"), spendHistChart = new dc.BarChart("#chart-hist-spend"), spenderRowChart = new dc.RowChart("#chart-row-spenders");// use static or load via d3.csv("spendData.csv").then(function(spendData) {/* do stuff */});var spendData = [ {Name: 'Mr A', Spent: '$40', Year: 2011}, {Name: 'Mr B', Spent: '$10', Year: 2011}, {Name: 'Mr C', Spent: '$40', Year: 2011}, {Name: 'Mr A', Spent: '$70', Year: 2012}, {Name: 'Mr B', Spent: '$20', Year: 2012}, {Name: 'Mr B', Spent: '$50', Year: 2013}, {Name: 'Mr C', Spent: '$30', Year: 2013}];// normalize/parse dataspendData.forEach(function(d) { d.Spent = d.Spent.match(/\d+/);});function remove_empty_bins(source_group) { return { all:function () { return source_group.all().filter(function(d) { return d.value != 0; }); } };}// set crossfiltervar ndx = crossfilter(spendData), yearDim = ndx.dimension(function(d) {return +d.Year;}), spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}), nameDim = ndx.dimension(function(d) {return d.Name;}), spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}), spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}), spendHist = spendDim.group().reduceCount(), nonEmptyHist = remove_empty_bins(spendHist)yearRingChart .width(200).height(200) .dimension(yearDim) .group(spendPerYear) .innerRadius(50);spendHistChart .width(300).height(200) .dimension(spendDim) .group(nonEmptyHist) .x(d3.scaleBand()) .xUnits(dc.units.ordinal) .elasticX(true) .elasticY(true);spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unitspendHistChart.yAxis().ticks(2);spenderRowChart .width(350).height(200) .dimension(nameDim) .group(spendPerName) .elasticX(true);dc.renderAll();</script></div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript
