nvd3中一列中饼图的垂直图例

Posted

技术标签:

【中文标题】nvd3中一列中饼图的垂直图例【英文标题】:Vertical legend in pieChart in one column in nvd3 【发布时间】:2015-12-13 09:20:39 【问题描述】:

我需要 PieChart 中的垂直图例。 现在库仅提供 2 个选项:顶部/右侧。 如果使用正确 - 图例在几列中。我需要一列中的图例。

我发现了一个 hack - 正确的变换值并将图例放在一列中。

  var positionX = 30;
  var positionY = 30;
  var verticalOffset = 25;

  d3.selectAll('.nv-legend .nv-series')[0].forEach(function(d) 
    positionY += verticalOffset;
    d3.select(d).attr('transform', 'translate(' + positionX + ',' + positionY + ')');
  );

它有效,但如果我单击图例来更新它 - 图例返回到起始位置(几列)。

JSFiddle example

【问题讨论】:

我也在寻找类似的东西。你能把它添加到 jsFiddle/plunkr 吗?我想破解它 @jusopi 添加了 JSFiddle 示例 【参考方案1】:

我知道这是一个老问题,但我有同样的问题并最终来到这里。没有一个答案对我有用,但我能够修改 Ranijth 的答案并让它工作(并且看起来不错)。

else if (legendPosition === "vertical")        
                var pad=50;
                var legendWidth=150; //might need to change this
                legend.height(availableHeight).key(pie.x());
                legend.width(legendWidth);                  

                wrap.select('.nv-legendWrap')
                    .datum(data)
                    .call(legend)
                    .attr('transform', 'translate('+ ((availableWidth / 2)+legendWidth+pad)+','+pad+')');
 

Pie Chart with Vertical Legend

【讨论】:

【参考方案2】:

快速破解。

修改 nv.d3.js 第 11149 行(其他版本可能不同)

// Legend
            if (showLegend) 
                if (legendPosition === "top") 

添加另一个垂直选项

 else if (legendPosition === "vertical") 

                    var legendWidth = nv.models.legend().width();
                    var positionY = 10;
                    var positionX = availableWidth - 200;
                    var verticalOffset = 20;

                    if ( margin.top != legend.height()) 
                        margin.top = legend.height();
                        availableHeight = nv.utils.availableHeight(height, container, margin);
                    

                    legend.width(200);
                  //  legend.height(availableHeight).key(pie.x());
                    positionY += verticalOffset;

                    wrap.select('.nv-legendWrap')
                        .datum(data)
                        .call(legend)
                        .attr('transform', 'translate(' + positionX + ',' + positionY + ')');
                

也可以玩变量。 与 Legends 配合得非常好。对于一个很长的传说列表。更多的逻辑想要应用。

【讨论】:

【参考方案3】:

解决方法是为每次单击和双击 .nv-legend 更新图例。

(function() 
  var h = 600;
  var r = h / 2;
  var arc = d3.svg.arc().outerRadius(r);

  var data = [
    "label": "Test 1",
    "value": 74
  , 
    "label": "Test 2",
    "value": 7
  , 
    "label": "Test 3",
    "value": 7
  , 
    "label": "Test 4",
    "value": 12
  ];


  var colors = [
    'rgb(178, 55, 56)',
    'rgb(213, 69, 70)',
    'rgb(230, 125, 126)',
    'rgb(239, 183, 182)'
  ]


  nv.addGraph(function() 
    var chart = nv.models.pieChart()
      .x(function(d) 
        return d.label
      )
      .y(function(d) 
        return d.value
      )
      .color(colors)
      .showLabels(true)
      .labelType("percent");

    d3.select("#chart svg")
      .datum(data)
      .transition().duration(1200)
      .call(chart);

    var svg = d3.select("#chart svg");

    function updateLegendPosition() 
      svg.selectAll(".nv-series")[0].forEach(function(d, i) 
        d3.select(d).attr("transform", "translate(0," + i * 15 + ")");
      )
    
    svg.select('.nv-legend').on("click", function() 
      updateLegendPosition();
    );

    svg.select('.nv-legend').on("dblclick", function() 
      updateLegendPosition();
    );

    updateLegendPosition();

    return chart;
  );


())
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);

#chart svg 
  height: 600px;


.nv-label text
    font-family: Droid Sans;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>


<div id="chart">
  <svg></svg>
</div>

【讨论】:

修复了 sn-p。如果有任何问题,只需将代码复制到您的 JSFiddle 示例并运行它。

以上是关于nvd3中一列中饼图的垂直图例的主要内容,如果未能解决你的问题,请参考以下文章

如何更改D3中饼图的位置?

饼状图表标题怎么修改

echarts中饼图的legend自定义icon图片(扇形为例)

Flex 3.0:在饼图的图例中显示数据

如何在 Kendo UI Charts 中禁用饼图的交互式图例?

recharts中饼图提供cornerRadius后如何加入