文章/答案/技术大牛

发布

社区首页 >问答首页 >在D3中将条形图更改为折线图

问在D3中将条形图更改为折线图
EN

Stack Overflow用户

提问于 2017-08-23 22:10:44

回答 1查看 1.5K关注 0票数 0

因为我在下面的可视化中将所有这些条形图转换为线形图。

我在buildAlpha函数中添加了附加的代码片段到我的代码中，该函数创建了所有与可视化相关的栏。

但是，我在DOM中既看不到路径标记，也看不到行标记。

请帮我把这些柱状图都改成折线图，并把y轴加到各自的图表上

        var line = d3.svg.line()
            .x(function (d) {
                return axes.timeX(new Date(d.date));
            })
            .y(function (d, i, j) {
                return axes[keys[j] + 'Y'](d[keys[j]]);
            })
            .interpolate("basis");

        var area = d3.svg.area()
            .x(function (d) {
                return axes.timeX(new Date(d.date));
            })
            .y0(108)
            .y1(function (d) {
                return axes[keys[j] + 'Y'](d[keys[j]]);
            });

        bars.append("path")
            .attr("class", "area")
            .attr("d", area);

        bars.append("path")
            .attr("class", "line")
            .attr("d", function (d, i) {
                return line(d['Air']);
            });

JSFIDDLE

使用折线图更新了Fiddle。

但是不能获得条形图中可用鼠标悬停线条和工具提示

javascript

d3.js

charts

visualization

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-27 00:15:59

一个更新的jsfiddle可以在here上使用。除了折线图部分，我还执行了以下步骤：

创建一个scales对象以获取每个图表的一个比例：

var scales = {};
fields.forEach(function(f){
  var currentData  = test.filter(function(d){return d.name===f;})[0].data;
  scales[f]= d3.scale.linear()
               .domain([0, d3.max(currentData, function(d) {return d.value})])
               .range([lineHeight, 0])
               .nice();
 });

将mousemove添加到派单：

var dispatch = d3.dispatch('hideTooltip', 'iTooltip', 'mousemove');

向每个图表追加一个文本以显示工具提示：

alphaWrap.append('text')
        .classed('tooltip', true)
        .style('text-anchor', 'end')
        .style('fill', function(d){return colorScale(d.name)});

在每个图表上追加一个rect以订阅mousemove事件。

当鼠标移动时，我得到它的位置，计算相应的日期，并发送它：

alphaWrap.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', xScale.range()[1])
        .attr('height', lineHeight)
        .style('pointer-events', 'all')
        .style('fill', 'transparent')
        .on('mousemove', function(d,i){
            var mouse=d3.mouse(this);
            var date = xScale.invert(mouse[0]);
            dispatch.mousemove(date);
        });

在所有3个图表上追加一条线：

d3.select('#chart-container')
      .append('line')
      .classed('tooltip', 'true')
      .style('stroke', 'darkgray')
      .attr('x1',90)
      .attr('x2',90)
      .attr('y1',0)
      .attr('y2',fields.length*plotHeight);

对dispatch mousemove事件做出反应

我创建了一个bisector来查找图表数据数组中最近日期的索引。感谢日期和平分线，线条可以适当地移动，并且可以显示工具提示值

var bisector = d3.bisector(function(d){return d.date}).right;
dispatch.on('mousemove', function(date){
  d3.select('line.tooltip')
    .attr('transform', 'translate('+xScale(date)+',0)')
  alphaWrap.select('text.tooltip')
        .attr('transform', function(d,i){
          var value = bisector(d.data, date);
          return 'translate('+xScale(date)+','+scales[d.name](d.data[value].value)+')';
        })
        .text(function(d,i){
          var value = bisector(d.data, date);
          return d3.format('2.2f')(d.data[value].value);
        });
    });

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45842149

复制

相似问题

问在D3中将条形图更改为折线图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在D3中将条形图更改为折线图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在D3中将条形图更改为折线图
EN