Question

我试图在同一svg中的d3.js中绘制条形图和折线图。在这里，我给出了线条和条形图的单独数据，但域名是使用bardata设置的。

barData.forEach(function(d) {
                var parts = d.time.split(/:/);
                var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                                       (parseInt(parts[1], 10) * 60 * 1000) + 
                                       (parseInt(parts[2], 10) * 1000);

                d.time = new Date();
                d.time.setTime(todayMillis + timePeriodMillis);

                var parts1 = d.time1.split(/:/);
                var timePeriodMillis1 = (parseInt(parts1[0], 10) * 60 * 60 * 1000)
                +(parseInt(parts1[1], 10) * 60 * 1000) 
                + (parseInt(parts1[2], 10) * 1000);

                d.time1 = new Date();
                d.time1.setTime(todayMillis + timePeriodMillis1);
            });

            var x = d3.time.scale()
                .domain(0, d3.extent(barData, function(d) { return d.time; }))
                .nice(d3.time.day, 1)
                .rangeRound([0, width - margin.left - margin.right]);

            var y = d3.scale.linear().range([height - margin.bottom, margin.top]).domain([0,
                     d3.max(barData, function (d) {
                     return d.total;
                      })
                    ]);

我正在获取条形图而不是行。这是域的问题。但我在同一天拍摄了两张图的值。

svg.selectAll('.chart')
                    .data(barData)
                    .enter().append('rect')
                    .attr('class', 'bar')
                    .attr("fill","lightblue")
                    .attr('x', function (d) {
                        return x(d.time);
                    })
                    .attr('y', function (d) {
                      return y(d.total) - margin.bottom;
                    })
                    .attr('width', function(d){
                    return (x(d.time1)-x(d.time));
                    })
                    .attr('height', function (d) {
                      return ((height - margin.bottom) - y(d.total));
                    })

这是绘制条形图的代码，它正常工作。在此之后我添加了一条无效的线。

var line = d3.svg.line()
                .x(function(d) {
                    return x(d.time); })
                .y(function(d) { return y(d.total); })
                .interpolate("step-before");

                    svg.append("path")
                  .datum(lineData)
                  .attr("class", "line")
                  .attr("width",100)
                   .style("fill", "none")
            .style("stroke", "red")
                  .attr("d", line);

请帮助解决问题

同一域中的条形图和线图d3.js

0 个答案: