d3.js - 时间序列图过滤多线图（为多个数据项渲染多线）

Question

使用时间序列图作为过滤器过滤多折线图的正确方法是什么？

我的焦点图表需要一个时间序列图表，如下图所示。每当我刷上时间序列图时，我的焦点图都需要根据时间序列图进行过滤。

时间序列图表只需要包含 X 轴和时间作为其维度，并且它应该与焦点图表相对于时间进行交互。

var totalNumber = null;
// ------ main chart function -------
function makeCompetitiveGraphs(error, keywords_data) {
 errorHandle(error);

 cleanedData = getCompositeChartData(keywords_data);
 console.log("===", cleanedData);
 minDate = moment.min(cleanedData.timeStamp);
 maxDate = moment.max(cleanedData.timeStamp);

 margins = { top: 27, right: 27, bottom: 36, left: 54 };

 // create composite chart.
  var composite = dc.compositeChart('#competitiveChart');

 // create cross filter
 var cf = crossfilter(cleanedData.keywordData);

 // create dimensions.
 var keywordDateDimension = cf.dimension(function (dp) { return dp.date; 
  });
 var Group = keywordDateDimension.group();

 // compose for key words
 composeCharts = composeKeywords(dc, composite, keywordDateDimension);

 // create chart.
 composite
  .width(width())
  .height(height())
  .transitionDuration(1000)
  .x(d3.time.scale().domain([minDate, maxDate]))
  .ordering(function (d) { return d.value; })
  .elasticY(true)
  .elasticX(true)
  .margins(margins)
  .legend(
  dc.legend()
    .x(1100)
    .y(10)
    .itemHeight(16)
    .gap(8)
    .horizontal(false)
     )
  .renderHorizontalGridLines(true)
  .brushOn(false);

 // compose the chart array.
 composite.compose(composeCharts);

// render the chart
 composite.render();

function getCompositeChartData(keywords) {
 let momentTimeStamps = [];
 let totalKeywordPerDay = [];
 let allKeywords = [];

 // clean data for d3js chart's
 keywords.forEach((kob) => {
  kob.sd.forEach((ob) => {
  allKeywords.push({
  name: kob.kn,
  total: ob.value.total__,
  date: new Date(moment(ob._id.mention_created_date_, "MMM-DD-YYYY-hh")._d),
});
momentTimeStamps.push(moment(moment(ob._id.mention_created_date_, "MMM-DD- 
 YYYY-hh")._d));
 totalKeywordPerDay.push(ob.value.total__);
 });
});
console.log("--------", allKeywords)

// apply date filter.
allKeywords = limiteDataToDateFilter(allKeywords);
return { "keywordData": allKeywords, "timeStamp": momentTimeStamps, 
"totalKeywordPerDay": totalKeywordPerDay };
}

function limiteDataToDateFilter(allKeywords) {
 cleanedDateWithDates = [];
 allKeywords.forEach(element => {
 if (moment(element.date).isAfter(moment().date(1).month(6)) &&
  moment(element.date).isBefore(moment().date(30).month(8))) {
  cleanedDateWithDates.push(element);
  }
});

 return cleanedDateWithDates;
}

function getReduce(keyword, keywordDateDimension) {
 return keywordDateDimension.group().reduceSum(function (dp) {
 return dp.name === keyword ? dp.total : 0;
 });
}

function composeKeywords(dc, composite, keywordDateDimension) {
 composeChartsData = []
 keywordsParams.forEach(keyword => {
 keyword.chart = dc.lineChart(composite)
  .dimension(keywordDateDimension)
  .colors(keyword.color)
  .group(getReduce(keyword.word, keywordDateDimension), keyword.word)
  .interpolate('basis')

  composeChartsData.push(keyword.chart);
 });

  return composeChartsData;
}

标签： d3.jsdc.jscrossfilter