nvd3 Linie plus Balkendiagramm mit variablen Kreisgrößen

Question

Ich benutze nvd3 Linie plus Balkendiagramm und versuche, die Größe der Kreise im Liniendiagramm zu ändern. (Jeder Kreis mit einem anderen Radius auf dem Liniendiagramm)

Um die Punkte sichtbar auf dem Liniendiagramm zu machen, habe ich die folgenden CSS-Code -

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

Ich rufe die addRadius Methode nach dem Diagramm ist gezeichnet.

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); 

Dieser Code funktionierte für ältere Version von nvd3, aber nicht Version 1.8.1 oder höher.

Ich sah einige Lösungen here, aber sie funktionieren nicht für die neuesten Versionen von nvd3.

Answer 1

Triy mit folgendem CSS:

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

und die Wähler in der addRadius ändern() Funktion:

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); 
    } 
} 

prüfen diese Schnipsel:

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>

Fiddle: http://jsfiddle.net/beaver71/cr8ejg0n/