D3.js 线图和面积图的不同颜色

我使用的是D3V4。我在其中创建了面积图和折线图。数据形成是非常重要的。 图表=>[1,4,5,2.4,6] 行=>[3,3,3,3,3]

现在我的要求是在折线图下面，面积图应该有不同的颜色

如果有任何其他图书馆可以这样做，那么也建议。 这是我画线和面积图的函数。 那么如果dailyConsValue>targetConsValue？”无颜色“：“显示颜色” dailydate是年[2017年1月-2017年12月]=>这是动态的

下面是我的代码：

function drawGraph(drawData, highlightedData, first, last) {
let margin, width, height, parseDate, xScale, yScale, area, 
dailyConsumption, targetConsumption, svg;
margin = {
  top: 10,
  right: 60,
  bottom: 10,
  left: 60
},
width = document.querySelector('#graph').clientWidth - margin.left - margin.right,
height = document.querySelector('#graph').clientHeight - margin.top - margin.bottom;

parseDate = d3.timeParse('%b %Y');
// x axis
xScale = d3.scaleTime().domain([parseDate(first), parseDate(last)]).range([0, width]);
// y axis
yScale = d3.scaleLinear().domain([-1, 2 + Math.max.apply(this, drawData.map(function(o){return o.dailyConsValue; }))])
.range([height, 0]);

area = d3.area()
.x(function(d) { return xScale(d['dailyDate']); })
.y0(function(d) { return yScale(d['targetConsValue']); })
.y1(function(d) { return yScale(d['dailyConsValue']); });
// define the line
dailyConsumption = d3.line().x(function(d) {return xScale(d['dailyDate']); })
 .y(function(d) {return yScale(d['dailyConsValue']); });

targetConsumption = d3.line().x(function(d) {return xScale(d['dailyDate']); })
    .y(function(d) {return yScale(d['targetConsValue']); });

svg = d3.select('#graph').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 + ')');

 // add axis
 svg.append('g')
 .attr('transform', 'translate(0,0)').attr('class', 'Xaxis')
 .call(d3.axisTop(xScale).ticks(drawData.length).tickSize(-innerHeight).tickFormat(d3.timeFormat('%b %Y')));
 svg.append('g').attr('class', 'Yaxis')
 .call(d3.axisLeft(yScale).tickSize(0));

 // Prepare data
 drawData.forEach(function( d ) {
   d['dailyDate'] = parseDate( d['dailyDate'] );
   d['targetConsValue'] = d['targetConsValue'];
   d['dailyConsValue'] = d['dailyConsValue'];
 } );

 highlightedData.forEach(function( d ) {
   d['dailyDate'] = parseDate( d['dailyDate'] );
   d['dailyConsValue'] = d['dailyConsValue'];
   d['active'] = d['active'];
 } );

 // add the area
 svg.append('path').data([drawData]).attr('class', 'area')
 .attr('d', area)
  .transition().duration(2500).attrTween( 'd', this.tween( drawData, area ) );

 // add data for first line
 svg.append('path')
 .data([drawData])
 .attr('class', 'daily').attr('d', targetConsumption).transition()
 .duration(2500).delay(1500 / 2).attrTween( 'd', this.tween( drawData, targetConsumption ) );

// add data for futureConsumption
 svg.append('path')
 .data([drawData])
 .attr('class', 'target').attr('data-legend', 'CST')
 .attr('d', dailyConsumption);

 createLengends(drawData);
 drawCircle(drawData, '10', '#037DA6');
 drawCircle(drawData, '5', '#003A54');


/**
 * legends start
 * @param datalegendsData
 */
function createLengends(datalegendsData) {
  let legend;
  legend = svg.selectAll('.legend').data([datalegendsData])
    .enter().append('g').attr('class', 'legend')
    .attr('transform', function(d, i) { return 'translate(0,' + i * 20 + ')'; });
  // making a line for legend
  legend.append('line')
      .attr('x1', width - 335).attr('x2', width - 305).attr('y1', height - 1)
      .attr('y2', height - 1).style('stroke', '5,5').style('stroke', '#4682B4');

  legend.append('text').attr('x', width - 300).attr('y', height - 1)
      .attr('dy', '.35em').style('text-anchor', 'start').text('IST Verbrauch WOB')
      .style('fill', '#666').style('font-weight', 'normal');

  legend.append('line').attr('x1', width - 130).attr('x2', width - 100)
      .attr('y1', height - 1).attr('y2', height - 1).style('stroke-dasharray', '5,5')
      .style('stroke', '#003A54');

  legend.append('text').attr('x', width - 96).attr('y', height - 1).attr('dy', '.35em')
      .style('text-anchor', 'start').text('CST Sollwert').style('fill', '#666')
      .style('font-weight', 'normal');
}
// legends end

/**
 * highlighted data points start
 * @param data
 * @param r
 * @param color
 */
function drawCircle(data, r, color) {
  let tooltip;
  tooltip = d3.select('#graph').append('div')
  .attr('class', 'tooltip').style('display', 'none');
  svg.selectAll('.dot').data(data).enter().append('circle') // Uses the enter().append() method
  .attr('class', 'circle_' + r).attr('cx', function(d) { return xScale(d['dailyDate']); })
  .attr('cy', function(d) {return yScale(d['dailyConsValue']); }).attr('r', r).attr('fill', color)
    .on( 'mouseover', function( d) {
      let arr, date;
      d3.select( this ).classed('circle circle__highlighted', true);
      d['active'] = true;
      tooltip.transition().duration(200).style('display', 'block');
      arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      date = arr[d['dailyDate'].getMonth()] + ', ' + d['dailyDate'].getFullYear();
      tooltip.html('Month ' + date + '<br/> Consumption- ' + d['dailyConsValue'] + ' unit')
      .style('left', (parseInt(this.getAttribute('cx'), 10) + 70) + 'px').style('top', (this.getAttribute('cy')) + 'px');
      /*tooltip.html('Month ' + date + '<br/> Consumption- ' + d['dailyConsValue'] + ' unit')
        .style('left', (d3.event.offsetX + 20) + 'px').style('top', (d3.event.offsetY - 28) + 'px');*/
  } ).on( 'mouseout', function( d ) {
        d3.selectAll('.circle').classed('circle', true).classed('circle__highlighted', false);
        d['active'] = false;
        tooltip.transition().duration(500).style('display', 'none');
  } );
}
// highlighted data points end
}

函数绘图图（drawData、highlightedData、first、last）{
让边距、宽度、高度、解析日期、xScale、yScale、面积、，
每日消费量、目标消费量、svg；
保证金={
前10名，
右：60，
底部：10，
左：60
},
宽度=document.querySelector（“#graph”）.clientWidth-margin.left-margin.right，
高度=document.querySelector（“#graph”）.clientHeight-margin.top-margin.bottom；
parseDate=d3.timeParse（“%b%Y”）；
//x轴
xScale=d3.scaleTime（）.domain（[parseDate（first），parseDate（last）]）.range（[0，width]）；
//y轴
yScale=d3.scaleLinear（）.domain（[-1,2+Math.max.apply（this，drawData.map（函数（o）{return o.dailyConsValue；}）））
.范围（[高度，0]）；
面积=d3.面积（）
.x（函数（d）{return xScale（d['dailyDate']）；}）
.y0（函数（d）{返回yScale（d['targetConsValue']；}）
.y1（函数（d）{return yScale（d['dailyConsValue']；}）；
//界定界线
dailyConsumption=d3.line（）.x（函数（d）{return xScale（d['dailyDate']）；}）
.y（函数（d）{return yScale（d['dailyConsValue']；}）；
targetConsumption=d3.line（）.x（函数（d）{return xScale（d['dailyDate']）；}）
.y（函数（d）{返回yScale（d['targetConsValue']；}）；
svg=d3。选择（“#图形”）。追加（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，
'翻译（'+margin.left+'、'+margin.top+'）；
//添加轴
append（'g'）
.attr（'transform'，'translate（0,0'））.attr（'class'，'Xaxis'））
.call（d3.axisTop（xScale）.ticks（drawData.length）.tickSize（-innerHeight）.tickFormat（d3.timeFormat（“%b%Y”））；
svg.append（'g'）.attr（'class'，'Yaxis'））
.call（d3.axisLeft（yScale）.tickSize（0））；
//准备数据
drawData.forEach（函数（d）{
d['dailyDate']=parseDate（d['dailyDate']）；
d['targetConsValue']=d['targetConsValue']；
d['dailyConsValue']=d['dailyConsValue']；
} );
highlightedData.forEach（函数（d）{
d['dailyDate']=parseDate（d['dailyDate']）；
d['dailyConsValue']=d['dailyConsValue']；
d['active']=d['active']；
} );
//添加区域
svg.append（'path'）.data（[drawData]）.attr（'class'，'area'））
.attr（'d'，区域）
.transition（）.duration（2500）.attrTween（'d'，this.tween（drawData，area））；
//为第一行添加数据
append（'path'）
.data（[drawData]）
.attr（'class'，'daily'）.attr（'d'，targetConsumption）.transition（）
.duration（2500）。delay（1500/2）。attrTween（'d'，this.tween（drawData，targetConsumption））；
//为未来消费添加数据
append（'path'）
.data（[drawData]）
.attr（'class'，'target'）。attr（'data-legend'，'CST'））
.attr（'d'，每日消耗量）；
createLengends（drawData）；
drawCircle（drawData，'10'，'037DA6'）；
drawCircle（drawData，'5'，'003A54'）；
/**
*传奇开始
*@param datalegendsData
*/
函数createLengends（datalegendsData）{
让传说；
legend=svg.selectAll（'.legend'）.data（[datalegendsData]）
.enter（）.append（'g'）.attr（'class'，'legend'））
.attr（'transform'，函数（d，i）{return'translate（0，+i*20+）'；}）；
//为传奇造句
图例.append（'行'）
.attr（'x1'，宽度-335）。attr（'x2'，宽度-305）。attr（'y1'，高度-1）
.attr（'y2'，高度-1）.style（'stroke'，'5,5'）.style（'stroke'，'4682B4'）；
图例.append（'text'）.attr（'x'，宽度-300）.attr（'y'，高度-1）
.attr（'dy'，'.35em'）。style（'text-anchor'，'start'）。text（'IST-Verbrauch-WOB'））
.style（'fill'，'#666'）。style（'font-weight'，'normal'）；
图例.append（'line'）.attr（'x1'，宽度-130）.attr（'x2'，宽度-100）
.attr（'y1'，高度-1）.attr（'y2'，高度-1）.style（'stroke-dasharray'，'5,5'））
.style（'stroke'，'003A54'）；
图例.append（'text'）.attr（'x'，宽度-96）.attr（'y'，高度-1）.attr（'dy'，'.35em'））
.style（'text-anchor'，'start'）。text（'CST-Sollwert'）。style（'fill'，'#666'））
.style（'font-weight'，'normal'）；
}
//传奇结束
/**
*突出显示的数据点开始
*@param数据
*@param r
*@param颜色
*/
函数drawCircle（数据、r、颜色）{
让工具提示；
tooltip=d3。选择（'#graph'）。追加（'div'））
.attr（'class'，'tooltip'）.style（'display'，'none'）；
svg.selectAll（'.dot'）.data（data）.enter（）.append（'circle'）//使用enter（）.append（）方法
.attr（'class'，'circle_'+r）.attr（'cx'，函数（d）{return xScale（d['dailyDate']）；}）
.attr（'cy'，函数（d）{return yScale（d['dailyConsValue']）；}）.attr（'r'，r）.attr（'fill'，color）
.on（'mouseover'，函数（d）{
让arr，日期；
d3.选择（this）.classed（'突出显示的圆圈'，true）；
d['active']=true；
tooltip.transition（）.duration（200）.style（'display'，'block'）；
arr=[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’、‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]；
date=arr[d['dailyDate'].getMonth（）]+'，'+d['dailyDate'].getFullYear（）；
html（'Month'+date+'
消耗量-'+d['dailyConsValue']+'unit'）
.style（'left'，（parseInt（this.getAttribute（'cx'），10）+70）+'px'）。style（'top'，（this.getAttribute（'cy'））+'px'）；
/*html（'Month'+date+'
消耗量-'+d['dailyConsValue']+'unit'）
.style（'left'，（d3.event.offsetX+20）+'px'）。style（'top'，（d3.event.offsetY-28）+'px'）*/
}）。打开（'mouseout'，函数（d）{
d3.选择全部（'.circle'）。分类（'circle'，true）。分类（'circle\uu highlighted'，false）；
d['active']=false；
tooltip.transition（）.duration（500）.style（'display'，'n
svg.append('path')
   .data([drawData]).attr('class', 'area')
   .attr('d', area)
   .style('fill', function(d){
      for (i in d) {
        if (d[i]['dailyConsValue'] < d[i]['targetConsValue']) {
           return "green"
        } else {
           return "blue"
        }
   }
   })
   .transition().duration(2500)
   .attrTween( 'd', this.tween( drawData, area ) );