0
我已经使用来自blockbuilder.org和Mike Bostock的可重用图表技术的一些片段创建了d3图表。使用d3的相同X轴多线图表
但是，我想单个y轴为多个图表。在这里，无论何时调用select函数，我都会为每个折线图创建Y轴。
还有更多的事情我不得不在这里提到，我只能显示最后选中的复选框图表的Y轴，它将成为底部图表。
这里是Jsfiddle这是我的工作
以下是在onload片段
$(window).load(function() {
var textareas$ = $('#chartarea div');
textareas$.hide();
$('input[name="Air"]').change(function() {
var elem$ = $(this);
var correspelem$ = textareas$.eq(elem$.val() - 1);
if (elem$.val() == 1) {
select('Retail', "#Retail");
} else if (elem$.val() == 2) {
select("Gas", "#Gas");
} else if (elem$.val() == 3) {
select("Dining", "#Dining");
} else {};
if (elem$.is(':checked')) correspelem$.show();
else correspelem$.hide();
});
});
var data = [ // <-A
{
date: "2014/01",
Gas: 10,
Retail: 22,
Dining: 120
},
{
date: "2014/02",
Gas: 10,
Retail: 42,
Dining: 53
},
{
date: "2014/03",
Gas: 30,
Retail: 24,
Dining: 76
},
{
date: "2014/04",
Gas: 50,
Retail: 29,
Dining: 49
},
{
date: "2014/05",
Gas: 80,
Retail: 47,
Dining: 47
},
{
date: "2014/06",
Gas: 65,
Retail: 78,
Dining: 64
},
{
date: "2014/07",
Gas: 55,
Retail: 38,
Dining: 29
},
{
date: "2014/08",
Gas: 43,
Retail: 34,
Dining: 47
},
{
date: "2014/09",
Gas: 20,
Retail: 54,
Dining: 34
},
{
date: "2014/10",
Gas: 10,
Retail: 34,
Dining: 27
},
{
date: "2014/11",
Gas: 43,
Retail: 8,
Dining: 45
},
{
date: "2014/12",
Gas: 40,
Retail: 26,
Dining: 28
},
{
date: "2015/01",
Gas: 10,
Retail: 34,
Dining: 54
},
{
date: "2015/02",
Gas: 15,
Retail: 29,
Dining: 28
},
{
date: "2015/03",
Gas: 30,
Retail: 19,
Dining: 43
},
{
date: "2015/04",
Gas: 50,
Retail: 23,
Dining: 43
},
{
date: "2015/05",
Gas: 80,
Retail: 49,
Dining: 43
},
{
date: "2015/06",
Gas: 65,
Retail: 32,
Dining: 43
},
{
date: "2015/07",
Gas: 55,
Retail: 25,
Dining: 39
},
{
date: "2015/08",
Gas: 30,
Retail: 35,
Dining: 47
},
{
date: "2015/09",
Gas: 20,
Retail: 54,
Dining: 37
},
{
date: "2015/10",
Gas: 10,
Retail: 34,
Dining: 54
},
{
date: "2015/11",
Gas: 8,
Retail: 29,
Dining: 44
},
{
date: "2015/12",
Gas: 40,
Retail: 14,
Dining: 45
},
{
date: "2016/01",
Gas: 10,
Retail: 15,
Dining: 34
},
{
date: "2016/02",
Gas: 15,
Retail: 34,
Dining: 23
},
{
date: "2016/03",
Gas: 30,
Retail: 28,
Dining: 45
},
{
date: "2016/04",
Gas: 50,
Retail: 34,
Dining: 65
},
{
date: "2016/05",
Gas: 80,
Retail: 45,
Dining: 67
},
{
date: "2016/06",
Gas: 65,
Retail: 35,
Dining: 65
},
{
date: "2016/07",
Gas: 55,
Retail: 43,
Dining: 36
},
{
date: "2016/08",
Gas: 30,
Retail: 34,
Dining: 53
},
{
date: "2016/09",
Gas: 20,
Retail: 54,
Dining: 76
},
{
date: "2016/10",
Gas: 10,
Retail: 45,
Dining: 65
},
{
date: "2016/11",
Gas: 8,
Retail: 43,
Dining: 56
},
{
date: "2016/12",
Gas: 40,
Retail: 23,
Dining: 64
}
];
var formatDate = d3.time.format("%b %Y");
function timeSeriesChart() {
var margin = {top: 20, right: 40, bottom: 30, left: 40},
width = 1150,
height = 120,
xValue = function(d) { return d[0]; },
yValue = function(d) { return d[1]; },
xScale = d3.time.scale(),
yScale = d3.scale.linear(),
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(formatDate)
.tickSize(6, 0)
.tickPadding(1),
area = d3.svg.area()
.x(X)
.y1(Y),
line = d3.svg.line()
.x(X)
.y(Y);
function chart(selection) {
selection.each(function(data) {
// Convert data to standard representation greedily;
// this is needed for nondeterministic accessors.
data = data.map(function(d, i) {
return [xValue.call(data, d, i), yValue.call(data, d, i)];
});
// Update the x-scale.
xScale
.domain(d3.extent(data, function(d) { return d[0]; }))
.range([0, width - margin.left - margin.right]);
// Update the y-scale.
yScale
.domain([0, d3.max(data, function(d) { return d[1]; })])
.range([height - margin.top - margin.bottom, 0]);
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg")
.data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg")
.append("g");
gEnter.append("path")
.attr("class", "area");
gEnter.append("path")
.attr("class", "line");
gEnter.append("g")
.attr("class", "x axis");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the area path.
// g.select(".area")
// .attr("d", area.y0(yScale.range()[0]));
// Update the line path.
g.select(".line")
.attr("d", line);
// Update the x-axis.
g.select(".x.axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.call(xAxis);
});
}
// The x-accessor for the path generator; xScale ∘ xValue.
function X(d) {
return xScale(d[0]);
}
// The x-accessor for the path generator; yScale ∘ yValue.
function Y(d) {
return yScale(d[1]);
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return chart;
};
chart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return chart;
};
return chart;
}
var chart = timeSeriesChart()
.x(function(d) { return new Date(d.date); })
.y(function(d) { return +d['category']; });
function select(category, id) {
var dataset = [];
dataset = data.map(function(d) {
return {
date:d.date,
category:d[category]
};
})
d3.select(id)
.datum(dataset)
.call(chart);
}ul {
list-style: none;
}
ul li {
margin: 10px;
font-size: 15px;
display: inline-block;
}
#chartarea {
display: table;
height: 470px;
width: 1150px;
box-shadow: 10px 10px 5px #c0c0c0
}
#Retail {
margin: 5px;
padding: 5px 5px 5px 5px;
width: 1150px;
box-shadow: 5px 5px 5px #808080;
}
#Gas {
margin: 5px;
padding: 5px 5px 5px 5px;
width: 720px;
box-shadow: 5px 5px 5px #808080;
}
#Dining {
margin: 5px;
padding: 5px 5px 5px 5px;
width: 720px;
box-shadow: 5px 5px 5px #808080;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
.area {
fill: #969696;
}
.attention {
background: yellow;
margin: -4px;
padding: 4px;
}
.Retail,
.Gas,
.Dining {
min-height: 22px;
min-width: 10px;
width: 0px;
height: 0px;
background-color: steelblue;
margin-bottom: 3px;
font-size: 11px;
color: #f0f8ff;
text-align: right;
padding-right: 2px;
}
#Gas,
#Dining,
#Retail {
display: table-row;
height: auto;
width: auto;
overflow: hidden;
}<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="options">
<h2>Options</h2>
<ul>
<li><input type="checkbox" name="Air" id="Ground1" value="1">Retail</li>
<li><input type="checkbox" name="Air" id="Ground2" value="2">Gas</li>
<li><input type="checkbox" name="Air" id="Ground2" value="3">Dining</li>
</ul>
</div>
<h2>Chart Area</h2>
<div id="chartarea">
<div id="Retail">Retail</div>
<div id="Gas">Gas</div>
<div id="Dining">Dining</div>
</div>请咨询，如果有需要的任何进一步的信息。
请打开的jsfiddle链接，并使用复选框 –
尝试我想x轴下面的图.. 。 –