D3数据未更新

Question

我正在尝试学习d3的一些基本概念，但在更新已经绑定到我的html元素的数据时，我会陷入困境。

我创建了一个js小提琴来展示问题jfiddle

我要做的是创建一个条宽，其宽度约为860px，其上还有几个条形。那些其他条的宽度将是条总宽度的百分比。

因此，此栏是根据我传递到第一个d3连接的数据生成的。 我想用一个不同大小的新栏来更新这些数据，但每当我尝试添加一个新项目时，图表会缩小到只显示新栏。

我没有使用svg来渲染我的栏，我还在学习基础知识，但这里是代码：

D3

var x = d3.scale.linear()
.domain( [ 0, d3.max( percents, function ( d ) {
    return d.percent
} ) ] )
.range( [ 0, chartRange ] );

chart.selectAll( 'div' ) // Creates an empty selection of divs
.data( percents, function ( d, i ) {
    // Joins the specified array of data with the current selection
    return d.percent;
} )
.enter().append( 'div' )
.style( 'width', function ( d ) {
    return x( d.percent ) + 'px';
} )
.style( {
    'height': '20px'
} )
.style( 'z-index', function ( d, i ) {
    return percents.length - i;
} )
.style( {
    'border-right': '2px dotted #00D0BC'
} )
.style( {
    'text-align': 'right'
} )
.append( 'p' )
.text( function ( d ) {
    return d.num * 10;
} );

数据

var percents = [
{
    num: 0,
    percent: 0,
    changed: false
},
{
    num: 30,
    percent: 0,
    changed: false
},
{
    num: 50,
    percent: 0,
    changed: false
},
{
    num: 70,
    percent: 0,
    changed: false
},
{
    num: 90,
    percent: 0,
    changed: false
},
{
    num: 100,
    percent: 0,
    changed: false
}
];

Answer 1

您必须再次手动调用D3并告诉它重新渲染您的数据。这是通过重新绑定数据来完成的。

所以封装你的＆＃34;绘图＆＃34;将功能集成到这样的函数中：

function renderData(percents) {
    chart.selectAll('div') // Creates an empty selection of divs
        .data(percents, function (d, i) {
            // Joins the specified array of data with the current selection
            return d.percent;
        })
        .enter().append('div')
        .style('width', function (d) {
            return x(d.percent) + 'px';
        })
        .style({
            'height': '20px'
        })
        .style('z-index', function (d, i) {
            return percents.length - i;
        })
        .style({
            'border-right': '2px dotted #00D0BC'
        })
        .style({
            'text-align': 'right'
        })
        .append('p')
        .text(function (d) {
            return d.num * 10;
        });
}

每次更改数据时，只需再次拨打renderData(percents)。