我正在尝试创建组合条形图和折线图。条形图是代表y轴的主要y轴，而线是代表data.percent的次要y轴。
免责声明：我对javascript和D3非常陌生。
我已经花了好几个小时试图弄清楚为什么图表无法呈现直线系列。这些代码中的某些代码是基于我在网上找到的其他示例模板，因此其中有些内容与我的修改无关，因此我完全错过了它。
我在这里先向您的帮助表示感谢！！！
这是我所拥有的：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>`enter code here`
svg{ padding-left: 100 px}
path {
stroke: Black;
stroke-width: 1;
fill: none;
}
.chartTitle{
color: #002b80;
font-size: 32pt;
font-weight: bold;
text-align: left;
padding-left: 20px;
}
</STYLE>
</HEAD>
<BODY>
<div class="chartTitle">Estimate of "Everything is Awesome"</div>
<SCRIPT SRC = 'd3.min.js'></SCRIPT>
<SCRIPT>
var data = [
{'date': '4/1/2015', 'total':500, 'percent':0.535},
{'date': '5/1/2015', 'total': 650, 'percent': 0.593},
{'date': '6/1/2015', 'total': 700, 'percent': 0.687},
{'date': '7/1/2015', 'total': 750, 'percent': 0.734},
{'date': '8/1/2015', 'total': 800, 'percent': 0.988},
{'date': '9/1/2015', 'total': 850, 'percent': 0.99},
{'date': '10/1/2015', 'total': 900, 'percent': 1.0}
];
var margin = {top: 70, right: 70, bottom: 70, left:60},
width = 600,
height = 500;
var toolTip = d3.select('body').append('div')
.style('position', 'absolute')
.style('background', 'white')
.style('opacity', .9)
.style('padding', '0 20px')
.style('border-radius', '25px')
.style('border', ' 2px solid dodgerblue')
// X and Y Axis
var xScale = d3.time.scale()
.domain([new Date(data[0].date), d3.time.month.offset(new Date(data[data.length - 1].date), 0)])
.rangeRound([0, width - margin.left - margin.right ]);
var y1Scale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.total;})])
.range([height - margin.top - margin.bottom, 0]);
var y2Scale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.percent;})])
.range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(d3.time.month, 1)
.tickFormat(d3.time.format('%b -%y'))
.tickSize(1)
.tickPadding(8);
var y1Axis = d3.svg.axis()
.scale(y1Scale)
.orient('left')
.tickPadding(8)
.tickSize(1);
var y2Axis = d3.svg.axis()
.scale(y2Scale)
.orient('right')
.tickPadding(8)
.tickSize(1);
var lineData = d3.svg.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return -1 * y2Scale(d.percent); });
//Chart Body
var svg = d3.select('body').append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
//Chart Body Creation
svg.selectAll('.chart')
.data(data)
.enter().append('rect')
.style('fill', 'dodgerblue')
.attr('class', 'bar')
.attr('x', function(d) { return xScale(new Date(d.date)); })
.attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y1Scale(d.total)) })
.attr('width', 20)
.attr('height', function(d) { return height - margin.top - margin.bottom - y1Scale(d.total) })
// Roll over SFX
.on('mouseover', function (d) {
toolTip.transition()
.style('opacity', .9)
toolTip.html(d.total)
.style('left', (d3.event.pageX - 40) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
d3.select(this)
.style('opacity', 0.5)
})
.on('mouseout', function (d) {
toolTip.transition()
.delay(100)
.duration(600)
.style('opacity', 0)
.style('pointer-events', 'none')
d3.select(this)
.style('opacity', 1)
});
//lDraw Line
svg.append("path")
.attr("d", lineData(data))
.style('stroke', 'DarkOrange');
//Draw the X Axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
.call(xAxis);
//Draw the Y1 Axis
svg.append('g')
.attr('class', 'y axis')
.call(y1Axis);
//Draw the Y2 Axis
svg.append('g')
.attr('class', 'y axis')
.attr("transform", "translate(" + (height ) + " ,0)")
.call(y2Axis);
</SCRIPT>
</BODY>
</HTML>
问题一：
您{'date': '10/1/2015', 'total': 900, 'percent': 1.0}在JSON中使用此格式的日期，则需要将其转换为日期对象。
var format = d3.time.format("%d/%m/%Y");
data.forEach(function(d){
d.date = format.parse(d.date);
});
有关各种日期格式的解析，请参阅
问题2：
您定义的域不正确
var xScale = d3.time.scale()
.domain([new Date(data[0].date), d3.time.month.offset(new Date(data[data.length - 1].date), 0)])
.rangeRound([0, width - margin.left - margin.right ]);
域应为日期的最小值/最大值。
var xScale = d3.time.scale()
.domain([d3.min(data, function(d){return d.date}), d3.max(data, function(d){return d.date})])
.rangeRound([0, width - margin.left - margin.right]);
线未绘制的原因
var lineData = d3.svg.line()
.x(function(d) { return xScale(d.date); })//this date is not in the correct format so d3 does not know what to do and so gives NaN.
.y(function(d) { return -1 * y2Scale(d.percent); });
现在，问题1将解决此问题，因为我们已将数据转换为日期。
这里的工作示例
希望这可以帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句