Question

D3JS是否可以根据尺寸绘制垂直气泡组我对Java脚本框架非常陌生，尤其是像D3JS这样的可视化。对于基本图表，我可以从网上获取样本。但是这些操纵图表，我不会像这样创建。请帮忙。

数据json：

[{Total: 750, left: 250, rigth: 500},
 {Total: 75, left: 25, rigth: 50}
]

总计：员工总数

左：女雇员总数

权利：男性雇员总数

Answer 1

使用以下代码段绘制圆圈。

水平线和数字留作练习。

var zoom = d3.behavior.zoom().on("zoom", zoomHandler);

xRange = d3.scale.ordinal().rangeBands([0, width]);
  yRange = d3.scale.ordinal().rangeBands([height, 0]);

function zoomHandler(){
  console.log('zoomed');
  var translate = zoom.translate(),
               scale = zoom.scale();

   var tx = Math.min(0, Math.max(translate[0], width - width * scale));
   var ty = Math.min(0, Math.max(translate[1], height - height * scale));

   zoom.translate([tx, ty]);

   xRange.rangeBands([d3.event.translate[0], d3.event.translate[0] + (width * d3.event.scale)])
   yRange.rangeBands([d3.event.translate[1] + (height * d3.event.scale), d3.event.translate[1]])

   svg.select(".x.axis").call(xAxis)
   svg.select(".y.axis").call(yAxis)

   svg.selectAll(".tile")
           .attr("width", xRange.rangeBand())
           .attr("height", yRange.rangeBand())
           .attr("x", function (d) {
               return xRange(d.x);
           })
           .attr("y", function (d) {
               return yRange(d.y);
           })

}

svg.on("mousedown", function() {
    console.log('mousedown ####');
    var e = this,
        origin = d3.mouse(e),
        rect = svg.append("rect").attr("class", "zoom");
    d3.select("body").classed("noselect", true);
    origin[0] = Math.max(0, Math.min(width, origin[0]));
    origin[1] = Math.max(0, Math.min(height, origin[1]));
    d3.select(window)
        .on("mousemove.zoomRect", function() {
          var m = d3.mouse(e);
          m[0] = Math.max(0, Math.min(width, m[0]));
          m[1] = Math.max(0, Math.min(height, m[1]));
          rect.attr("x", Math.min(origin[0], m[0]))
              .attr("y", Math.min(origin[1], m[1]))
              .attr("width", Math.abs(m[0] - origin[0]))
              .attr("height", Math.abs(m[1] - origin[1]));
        })
        .on("mouseup.zoomRect", function() {
          d3.select(window).on("mousemove.zoomRect", null).on("mouseup.zoomRect", null);
          d3.select("body").classed("noselect", false);
          var m = d3.mouse(e);
          m[0] = Math.max(0, Math.min(width, m[0]));
          m[1] = Math.max(0, Math.min(height, m[1]));
          if (m[0] !== origin[0] && m[1] !== origin[1]) {
            console.log('zoom rect');
            //here i need to trigger zoom translate/scale event, don't know how to trigger that.
          }
          rect.remove();
          refresh();
        }, true);
    d3.event.stopPropagation();
  });

var svgWidth = 700, svgHeight = 700;
var svg = d3.select('body').append('svg').attr('width', svgWidth).attr('height', svgHeight);
var data = [
  {Total: 750, left: 250, right: 500},
  {Total: 75, left: 25, right: 50},
  {Total: 1000, left: 750, right: 250},
  {Total: 125, left: 25, right: 100}
];

var yScale = d3.scaleBand().domain(d3.range(data.length)).rangeRound([0,svgHeight]);
var radius = d3.scaleLinear().domain([0,1200]).range([10, yScale.bandwidth()*0.5]);

var bars = svg.selectAll('.bar')
    .data(data)
  .enter()
  .append('g')
    .attr('class', 'bar')
    .attr('transform', (d,i) => `translate(${svgWidth * 0.5},${yScale(i)+yScale.bandwidth()*0.5})`)
    ;
bars.append('circle')
    .attr('r', d => radius(d.Total));
bars.append('text')
    .text( d => d.Total)
    .attr('text-anchor', 'middle')
    .attr('dy', '0.3em');

.bar circle {
  fill:none;
  stroke:steelblue;
  stroke-width: 2;
}

D3JS是否可以根据尺寸绘制垂直气泡组

1 个答案: