javascript - 水平滚动的 SVG

Question

我正在尝试用 D3 ( https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js ) 做一个 SVG 图形，其中条形宽度是手动定义的，并且有一个水平滚动条..

我这里有一个工作 fiddle

https://jsfiddle.net/bikrantsharma/zw264tfc/12/

我的比例是这样定义的

var barWidth = 30,
  paddingFactor = 2.2,
  responsiveDIVHeight = 300,
  responsiveDIVWidth = tempData.length * barWidth * paddingFactor;



var x = d3.scale.ordinal().rangeRoundBands([0, responsiveDIVWidth], 0.5)
  .domain(tempData.map(function(d) {
    return d.Type
  })),
  y = d3.scale.linear().rangeRound([responsiveDIVHeight, 0])
  .domain([0, d3.max(tempData, function(d) {
    return (d.Count + 10);
  })]),

有两个问题需要帮助:

1. 条形图向相反方向翻转。如何翻转 div 或变换条形？

2. 条形图的高度略低于实际值。因此，例如，如果计数为“5”，则条形高度返回为 4.8 或类似值。那里有什么问题？

Answer 1

您的条形图未翻转。这里发生的事情非常简单:你有两个 SVG，一个在顶部，一个在底部，你在底部的 SVG 中绘制矩形。矩形如何神奇地出现在 top SVG 中？这是不可能的。

取而代之的是，绘制 SVG 并排。左边的纵轴是float: left以<div>的风格它在，右边的，可滚动的，有overflow-x: scroll以<div>的风格它在。

这是一个对您的代码进行尽可能少的更改的演示:

var tempData = [];
for (var i = 1; i < 30; i++) {
  var obj = {

    "Id": 1,
    "Type": 'A' + i,
    "Count": 5
  };
  tempData.push(obj);
}


var barWidth = 30,
  paddingFactor = 2.2,
  padding = 20,
  responsiveDIVHeight = 300,
  responsiveDIVWidth = tempData.length * barWidth * paddingFactor;

var x = d3.scale.ordinal().rangeRoundBands([0, responsiveDIVWidth], 0.5)
  .domain(tempData.map(function(d) {
    return d.Type
  })),
  y = d3.scale.linear().rangeRound([responsiveDIVHeight - padding, padding])
  .domain([0, d3.max(tempData, function(d) {
    return (d.Count + 10);
  })]),
  xAxis = d3.svg.axis().scale(x).orient('bottom'),
  yAxis = d3.svg.axis().scale(y).orient('left');


var svgY = d3.select('#verticalSVG')
  .append('svg')
  .attr('height', responsiveDIVHeight)
  .attr("width", 50);

svgY.append('g')
  .attr('class', 'y axis')
  .call(yAxis)
  .attr('dx', '-0.3em')
  .attr('transform', "translate(50, 0)");;

var svgX = d3.select('#horizontalSVG')
  .append('svg')
  .attr('width', responsiveDIVWidth)
  .attr('height', responsiveDIVHeight);

svgX.append('g')
  .attr('class', 'x axis')
  .attr('transform', "translate(0," + (responsiveDIVHeight - padding) + ")")
  .call(xAxis)
  .selectAll('text')
  .attr('dx', '-0.8em')
  .attr('dy', '-.15em')
  .attr('transform', function(d) {
    return "rotate(-60)"
  });


var startPoint = 0;

var bar = svgX.selectAll('.bar')
  .data(tempData)
  .enter()
  .append('rect')
  .attr('y', function(d) {
    return y(d.Count)
  })
  .attr('x', function(d) {
    return x(d.Type)
  })
  .attr('width', barWidth)
  .attr('height', function(d) {
    return responsiveDIVHeight - y(d.Count) - padding
  })

.legend-main-div {
  padding: 2%;
  max-height: 150px;
  overflow-y: scroll;
  border: 1px solid blue;
}

.axis line,
.axis path {
  fill: none;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="row">
  <div class="col-md-12">

    <div id="verticalSVG" style="float:left">

    </div>
    <div id="horizontalSVG" style="overflow-x:scroll">

    </div>
  </div>

</div>