javascript - 在 svg 图表顶部添加 div (D3.js)

Question

我有一个条形图，我想在每个条形的右上角添加一个圆形红色 x 以表明用户可以删除特定条形，但我无法弄清楚如何添加它。这就是我喜欢的最终图像的样子，但也在其他四个条上重复。

我提供了一个 jsfiddle 以及 JS 代码，它可以执行我喜欢图表执行的所有其他操作，除了没有红色 x 之外。

DemoCode

    // graph variables
    var xScale                 ,
        yScale                 ,
        xAxis                  ,
        yAxis                  ;

    // chart dimensions
    var margin   = { top: 20, right: 30, bottom: 20, left: 70 },
        width    =  $('#chart').width() - margin.left - margin.right,
        height   =  $(window).height() / 3.5 - margin.top - margin.bottom;

    // color palette for graph
    var colors = [ '#4398B5', '#ADC4CC', '#92B06A', '#E09D2A', '#DE5F32' ];

    var data = [
        { id : 1, value : 100},
        { id : 2, value : 200},
        { id : 3, value : 300},
        { id : 4, value : 400},
        { id : 5, value : 500}
    ];

    // svg object for graph
    var svg;

    xScale = d3.scaleBand()
               .domain( d3.range( data.length ) )
               .range( [ 0, width ] )
               .padding( 0.1 );

    var yMax = d3.max( data, function( d ) {
        return d.value;
    });

    yScale = d3.scaleLinear()
               .domain( [ 0, yMax  ] )
               .range( [ height, 0 ] );


    xAxis = d3.axisBottom( xScale );
    yAxis = d3.axisLeft( yScale );

    var yTicks       = yAxis.ticks(5),
        yTicksFormat = yAxis.tickFormat( d3.format( '$,' ) );

    svg = d3.select( '#chart svg' )
                    .attr('viewBox', '0 0 ' +  ( width + margin.left + margin.right ) + ' ' + ( height  + margin.top + margin.bottom ) )
                    .attr('height', ( height + 'px' ) )
                    .attr('width', '100%')
                    .attr('preserveAspectRatio', 'none')
                    .append( 'g' )
                    .attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' );

    svg.selectAll( 'rect' )
       .data( data )
       .enter()
       .append( 'rect' )
           .attr('x', function ( d, i ) {
                return xScale( i );
           })
           .attr('y', function( d, i ) {
                return yScale( 0 );
           })
           .attr( 'height', function( d ) {
               return height - yScale( 0 );
           })
           .attr( 'width', xScale.bandwidth() )
           .attr('fill', function( d, i ) {
               return colors[ i ];
           })
           .transition()
           .duration( 1500 )
           .attr( 'y', function( d, i ) {
               return yScale( d.value );
           })
           .attr( 'height', function( d ) {
               return height - yScale( d.value );
           })
           .on('end', function( d, i ) {
                /*Insert this button somewhere
                    <button type="button" class="btn btn-default btn-circle btn-danger"><i class="glyphicon glyphicon-remove"></i></button>*/

           });

    svg.append( 'g' )
       .attr( 'class', 'yAxis' )
       .attr( 'transform', 'translate(0, ' + (-1) + ')')
       .call( yAxis );

我想在调用每个条形后插入红色 x .on('end', function...) 函数。

实际的红色 x 本身是

<button type="button" class="btn btn-default btn-circle btn-danger"><i class="glyphicon glyphicon-remove"></i></button>*/

它的 CSS 是

    .btn-circle {
        width: 19px;
        height: 19px;
        text-align: center;
        padding: 1px 0;
        font-size: 13px;
        line-height: 0.1;
        border-radius: 30px;
    }

这是在 JSFiddle 中提供的。任何帮助将不胜感激。

谢谢!

Answer 1

代替附加 div (或任何其他无法附加到 SVG 的 HTML 元素)，可以更轻松地附加 SVG 圆形元素和 SVG 文本元素，模仿按钮:

var circles = svg.selectAll('.circles')
    .data(data)
    .enter()
    .append('circle').attr("cursor", "pointer")
    .attr('cx', function (d, i) {
        return xScale(i)+ xScale.bandwidth();
     })
    .attr('cy', function(d, i) {
        return yScale(0);
    })
    .attr('fill', "red").attr("r", 8)
    .transition()
    .duration(1500)
    .attr('cy', function(d, i) {
         return yScale( d.value );
    });

var xtext = svg.selectAll('.xtext')
    .data(data)
    .enter()
    .append('text')
    .attr('x', function (d, i) {
        return xScale( i )+ xScale.bandwidth();
    })
    .attr('y', function( d, i ) {
        return yScale( 0 );
    })
    .attr('fill', "white")
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .attr("pointer-events", "none")
    .text("x")
    .transition()
    .duration( 1500 )
    .attr( 'y', function( d, i ) {
       return yScale( d.value );
    });

这是 fiddle :https://jsfiddle.net/dcb8ok9j/

PS:这只会添加圆圈，您必须单独添加行为。