nvd3 线加条形图，圆形大小可变答案

【问题标题】：nvd3 line plus bar chart with variable circle sizesnvd3 线加条形图，圆形大小可变
【发布时间】：2017-12-19 18:36:59
【问题描述】：

我正在使用 nvd3 线加条形图，并尝试更改折线图中圆圈的大小。（折线图上每个圆的半径不同）

为了使点在折线图上可见，我使用了以下 CSS 代码 -

#test-plot .nv-linePlusBar .nv-point
{
    fill: #ff5f00;
    fill-opacity: 0.6;
}

我在绘制图表后调用addRadius方法。

function addRadius() {
        for (var i = 0; i < plotdata[0].values.length ; i++) {
            var rad = parseFloat(plotdata[0].values[i].r);
            $('#test-plot .nv-point-' + i).attr('r', rad);
        }
 }

 setTimeout(addRadius, 500);

此代码适用于旧版本的 nvd3，但不适用于 1.8.1 或更高版本。

我看到了一些解决方案here，但它们不适用于最新版本的 nvd3。

【问题讨论】：

标签： nvd3.js linechart lineplusbarchart

【解决方案1】：

尝试使用以下 CSS：

.nvd3 .nv-groups .nv-point {
    stroke-opacity: 0.5 !important;
}

并在 addRadius() 函数中更改选择器：

function addRadius() {
  var dt = data[1].values;
  console.log(dt, dt.length)
  for (var i = 0; i < dt.length; i++) {
    // just an example
    var w = 20 * dt[i][1] / 600;
    $('.nvd3 .nv-groups .nv-point-' + i).css('stroke-width', w);
  }
}

检查这个sn-p：

var data = [{
  "key": "Quantity",
  "bar": true,
  "values": [
    [1301544000000, 2000],
    [1304136000000, 2500],
    [1306814400000, 1800],
    [1309406400000, 2100],
    [1312084800000, 2100],
    [1314763200000, 2800]
  ]
}, {
  "key": "Price",
  "values": [
    [1301544000000, 348.5075, 20],
    [1304136000000, 350.13, 30],
    [1306814400000, 347.83, 10],
    [1309406400000, 335.67, 5],
    [1312084800000, 390.48, 40],
    [1314763200000, 384.83, 10]
  ]
}]
$(document).ready(function() {

nv.addGraph(function() {
  var chart = nv.models.linePlusBarChart()
    .focusEnable(false)
    .margin({
      top: 30,
      right: 60,
      bottom: 50,
      left: 70
    })
    .x(function(d, i) {
      return i
    })
    .y(function(d) {
      return d[1]
    })
    .color(d3.scale.category10().range());

  chart.xAxis
    .showMaxMin(false)
    .tickFormat(function(d) {
      var dx = data[0].values[d] && data[0].values[d][0] || 0;
      return d3.time.format('%x')(new Date(dx))
    });

  chart.y1Axis
    .tickFormat(d3.format(',f'));

  chart.y2Axis
    .tickFormat(function(d) {
      return '$' + d3.format(',f')(d)
    });

  chart.bars.forceY([0]);

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

});

function addRadius() {
  var dt = data[1].values;
  console.log(dt, dt.length)
  for (var i = 0; i < dt.length; i++) {
    //var rad = parseFloat(data[1].values[i].r);
    //$('.nvd3 .nv-groups .nv-point-' + i).attr('r', rad);
    var w = dt[i][2];
    console.log("w" + i, w);
    $('.nvd3 .nv-groups .nv-point-' + i).css('stroke-width', w);
  }
}

setTimeout(addRadius, 500);

#chart svg {
  height: 400px;
}

.nvd3 .nv-groups .nv-point {
  stroke: red;
  fill: red;
  stroke-opacity: 0.5 !important;
  /*stroke-width: 20px;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<link href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css" rel="stylesheet"/>

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

小提琴：http://jsfiddle.net/beaver71/cr8ejg0n/

【讨论】：