D3.js 如何在dc.js中设置yScale
我是dc.js的新手。我想在两个值之间设置yScale。我在D3中设置yScale没有问题,但在dc.js中它似乎更复杂。在文档中我什么也没找到。 我试过: .y(d3.scaleLinear().range([minY,maxY])或 .y(d3.scaleLinear().domain([minY,maxY]),但未成功 谢谢你的帮助 我的代码:D3.js 如何在dc.js中设置yScale,d3.js,dc.js,crossfilter,D3.js,Dc.js,Crossfilter,我是dc.js的新手。我想在两个值之间设置yScale。我在D3中设置yScale没有问题,但在dc.js中它似乎更复杂。在文档中我什么也没找到。 我试过: .y(d3.scaleLinear().range([minY,maxY])或 .y(d3.scaleLinear().domain([minY,maxY]),但未成功 谢谢你的帮助 我的代码: // Parse the date / time const dateFormatSpecifier = "%Y-%m-%d"
// Parse the date / time
const dateFormatSpecifier = "%Y-%m-%d";
const dateFormat = d3.timeFormat(dateFormatSpecifier);
const dateFormatParser = d3.timeParse(dateFormatSpecifier);
const numberFormat = d3.format('.2f');
// Get the data
d3.json("{% url "fund:block_time_analysis" asset_id %}").then(function(data){
console.log(data)
data.forEach(function(d) {
d.date = dateFormatParser(d.date);
d.close = +d.close;
d.open = +d.open;
d.aum = +d.aum;
d.valueBchk = +d.valueBchk;
d.valueIdx = +d.valueIdx;
});
// not very proud of this part but I don't find another way
const minfd = d3.min(data, function(d) { return d.close; });
const minbchk = d3.min(data, function(d) { return d.valueBchk; });
const minidx = d3.min(data, function(d) { return d.valueIdx; });
const minY = d3.min([minfd, minbchk, minidx]);
const maxfd = d3.max(data, function(d) { return d.close; });
const maxbchk = d3.max(data, function(d) { return d.valueBchk; });
const maxidx = d3.max(data, function(d) { return d.valueIdx; });
const maxY = d3.min([maxfd, maxbchk, maxidx]);
const ndx = crossfilter(data)
// Create chart objects
var cumulativeChart = dc.compositeChart("{{ id_chart }}");
var dateDim = ndx.dimension(d => d.date);
var fdValue = dateDim.group().reduceSum(function (d) {return d.close; });
var bchkValue = dateDim.group().reduceSum(function (d) {return d.valueBchk; });
var idxValue = dateDim.group().reduceSum(function (d) {return d.valueIdx; });
let xScale = d3.scaleTime().domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
let yScale = d3.scaleLinear().domain([minY, maxY])
cumulativeChart.width(width_block1)
.height(height_ts_block1)
.margins(margin_ts_block1)
.dimension(dateDim)
.transitionDuration(500)
.elasticY(true)
.brushOn(true)
.valueAccessor(function (d) { return d.value})
.title(function (d) {return d.key;})
.x(xScale).xUnits(d3.timeDays)
.y(yScale)
.compose([
dc.lineChart(cumulativeChart).group(fdValue),
dc.lineChart(cumulativeChart).group(bchkValue),
dc.lineChart(cumulativeChart).group(idxValue)
])
dc.renderAll();
});
请详细说明预期的和实际的行为。你得到了什么结果,空白图表还是错误?还是错误的领域?如果您设置了
elasticY(true)
,则图表将自动为您设置域,取消您设置域的尝试。通常你不想设定范围(图表会帮你)。嗨,戈登,实际上你给了我问题的解决方案。当我将elasticY设置为false时,图表将正确设置域。非常感谢,太好了!是的,这就是参数的作用…请详细说明预期和实际的行为。你得到了什么结果,空白图表还是错误?还是错误的领域?如果您设置了elasticY(true)
,则图表将自动为您设置域,取消您设置域的尝试。通常你不想设定范围(图表会帮你)。嗨,戈登,实际上你给了我问题的解决方案。当我将elasticY设置为false时,图表将正确设置域。非常感谢,太好了!是的,这就是参数的作用。。。