在svg圖表上添加div（D3.js）

我有一張條形圖，我想在每個欄的右上角添加一個圓形的紅色x以顯示用戶可以刪除特定的欄，但我無法弄清楚如何添加這個。這就是我喜歡的最終形象，但也重複其他四個欄。在svg圖表上添加div（D3.js）

我已經提供了一個jsfiddle和JS代碼，除了沒有紅色的x之外，我做了其他所有我喜歡的圖形。

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

我猜每個酒吧.on('end', function...)函數被調用後插入紅色的X。

實際紅色的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。任何幫助將不勝感激。

謝謝！

來源

2016-10-10 ans

你需要X與酒吧一起成長嗎？或只出現在動畫的結尾？ – Varin

對不起，應該提到我認爲沒關係，只要圖標在右上角出現，圖標就保持不變。如果我確實希望它增長，我想我可以把它放在一個響應式div中，並且沒問題，但我不確定。 – ans

我的意思是 - 你需要爲它們設置動畫 - 用小節提高，出現在SVG加載結束時，還是不斷地在那裏？ – Varin

而是附加一個div（或任何其他HTML元素，你可以不追加到SVG），它更容易追加一個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); 
    });

這裏是小提琴：https://jsfiddle.net/dcb8ok9j/

PS：這隻會添加圓圈，您必須單獨添加行爲。

來源

2016-10-11 02:28:51

在svg圖表上添加div（D3.js）

回答

相關問題