- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在关注Mike's tutorial Let's make a bar graph part II , part III对于 d3 中的条形图。
我最终得到了一个水平条形图。
问题是我无法将 y 轴标签设置为与其各自的条形对齐,也许我的序数比例或设置条形的 y 位置有问题。
此外,图表条是从顶部开始而不是从基线开始。
var options = {
margin: {
top: 0,
right: 30,
bottom: 0,
left: 50
},
width: 560,
height: 400,
element: 'body',
colors: ["#f44336", "#e91e63", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]
};
options.mWidth = options.width - options.margin.left - options.margin.right;
options.mHeight = options.height - options.margin.top - options.margin.bottom;
var _colorScale = d3.scale.ordinal()
// .domain([minValue,maxValue])
.range(options.colors);
var items = Math.round((Math.random() * 10) + 3);
var data = [];
for (var i = 0; i < items; i++) {
data.push({
label: 'label' + i,
value: Math.random() * 100
});
}
var _barThickness = 20;
var width = options.mWidth,
height = options.mHeight;
var svg = d3.select(options.element)
.append("svg")
.attr("width", width).attr("height", height)
.attr("viewBox", "0 0 " + options.width + " " + options.height)
//.attr("preserveAspectRatio", "xMinYMin meet")
.append("g");
svg.attr("transform", "translate(" + options.margin.left * 2 + "," + options.margin.top + ")");
var maxValue = 0,
minValue = 0;
for (var i = 0; i < data.length; i++) {
maxValue = Math.max(maxValue, data[i].value);
minValue = Math.min(minValue, data[i].value);
}
var scales = {
x: d3.scale.linear().domain([0, maxValue]).range([0, width / 2]),
y: d3.scale.ordinal().rangeRoundBands([0, height], .1)
}
scales.y.domain(data.map(function(d) {
return d.label;
}));
var bars = svg.append("g")
.attr("class", "bar");
var xAxis = d3.svg.axis()
.scale(scales.x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(scales.y)
.orient("left");
var xaxis = svg.append("g")
.attr("class", "x axis")
.attr('transform', 'translate(' + 0 + ',' + height + ')')
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("dy", "3em")
.style("text-anchor", "middle")
.text("Durations in hours");
var yaxis = svg.append("g")
.attr("class", "y axis")
.attr('transform', 'translate(' + 0 + ',' + 0 + ')')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -options.margin.left)
.attr("x", -height / 2)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Labels");
var bar = bars.selectAll('rect.bar').data(data);
var rect = bar.enter()
.append('g')
.attr('transform', function(d, i) {
return 'translate(0,' + parseInt(i * _barThickness + 2) + ')';
});
rect.append('rect')
.attr('class', 'bar')
.attr('fill', function(d) {
return _colorScale(d.value);
})
.attr('width', function(d) {
return scales.x(d.value);
})
.attr('height', _barThickness - 1)
.attr('y', function(d, i) {
return (i * _barThickness);
})
rect.append('text')
.attr('x', function(d) {
return scales.x(d.value) + 2;
})
.attr('y', function(d, i) {
return (i * _barThickness);
})
.attr('dy', '0.35em')
.text(function(d) {
return Math.round(d.value);
});
svg {
width: 100%;
height: 100%;
}
text {
font-size: 0.8em;
line-height: 1em;
}
path.slice {
stroke-width: 2px;
}
polyline {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
最佳答案
问题 1:
而不是这个:
var _barThickness = 20;
这样做:
var _barThickness = scales.y.rangeBand();
阅读here
如果你想调节粗细
而不是这个:
y: d3.scale.ordinal().rangeRoundBands([0, height], .1)
这样做:
y: d3.scale.ordinal().rangeRoundBands([0, height], .7)
问题2:
转换不正确。
而不是这个:
var rect = bar.enter()
.append('g')
.attr('transform', function(d, i) {
return 'translate(0,' + parseInt(i * _barThickness + 2) + ')';
});
这样做:
var rect = bar.enter()
.append('g');
问题3:
条形的 y 计算不正确。
.attr('y', function(d, i) {
return (i * _barThickness);
})
这样做:
.attr('y', function(d, i) {
return scales.y(d.label);
})
工作代码here
关于javascript - 在 D3 条形图中,y 轴序数比例未与条形正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38346020/
有人知道如何在数组字段中插入以竖线/竖线分隔的数组吗? 逗号可以正常工作,但是当我将其更改为 bar 时,它会产生错误“格式错误的数组文字” 示例(有效): insert into table (ar
我尽力阅读与我的问题相关的问题。最相关的是:question .但是我无法弄清楚如何解决我的问题。我有一个像这样的数据集 structure(list(COMPANY = structure(1
在使用 matplotlib 挣扎了比我想承认的时间更长的时间之后,我试图在我使用过的几乎任何其他绘图库中做一些轻而易举的事情,我决定向 Stackiverse 寻求一些见解。简而言之,我需要的是创建
如何实现带有条形样式的 Activity 指示器。根据以下文档http://developer.android.com/design/building-blocks/progress.html “Ac
我正在尝试使用数组中的数据制作水平条形图 $values = implode(',', array_values($type)); $labels = implode('|', array_keys(
这个问题在这里已经有了答案: Two-tone background split by diagonal line using css (7 个答案) Create a slanted edge
我正在处理一个范围非常大的图表,我发现条形图偏离了轴。我怎样才能阻止这个?这是我在教程中编写的一个示例,因为我的数据是通过读取大量文件获取的。这说明了我遇到的问题。我给出了标准差,意味着一个很大的范围
我在 Swift 2.2 中创建了一个 UIProgressView(条形),现在想改变它的高度。其他一些帖子建议使用 CGAffineTransformScale 来更改高度。但是,出于某种原因,这
我想在条形图上绘制两组具有不同比例的值。例如,对于一周中的每一天,我都有一个比例(比如那天同事迟到的比例)和一个值(他们平均迟到多长时间)。 这两个值可以绘制在两个单独的图表上,但将它们放在同一个图表
我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): ht
我安装了 YCM(你完成了我),当我编码时,我发现命令 $ 不工作。它不会跳到行尾,而是跳到最后一行。例如,a.cpp 中的一行: #include| 现在光标在 include 之后,然后我键
我想在条形图顶部显示自定义标签。 下面是我的 stacklabel 代码,这里的问题是我想在 stacklabel 的格式化程序中使用堆栈的类别名称,我该如何访问它。 stackLabels: {
我是一名优秀的程序员,十分优秀!