- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 additional vertical lines on the x axis. 制作 D3 条形图.
我检查了下面示例中的一个网站。我想让它像那张图一样,但我想要一条额外的底线。你能告诉我要改变什么吗?
var margin = {
top: 20,
right: 20,
bottom: 60,
left: 40
},
width = 560 - margin.left - margin.right,
height = 360 - margin.top - margin.bottom;
var color = {
Mechanical: '#4A7B9D',
Electrical: '#54577C',
Hydraulic: '#ED6A5A'
};
var barPadding = 40;
var data = [{
key: 'Mechanical',
values: [{
key: 'Gear',
value: 11
}, {
key: 'Bearing',
value: 8
}, {
key: 'Motor',
value: 3
}]
}, {
key: 'Electrical',
values: [{
key: 'Switch',
value: 19
}, {
key: 'Plug',
value: 12
}, {
key: 'Cord',
value: 11
}, {
key: 'Fuse',
value: 3
}, {
key: 'Bulb',
value: 2
}]
}, {
key: 'Hydraulic',
values: [{
key: 'Pump',
value: 4
}, {
key: 'Leak',
value: 3
}, {
key: 'Seals',
value: 1
}]
}];
var rangeBands = [];
var cummulative = 0;
data.forEach(function(val, i) {
val.cummulative = cummulative;
cummulative += val.values.length;
val.values.forEach(function(values) {
values.parentKey = val.key;
rangeBands.push(i);
})
});
//console.log(data);
var x_category = d3.scale.linear()
.range([0, width]);
var x_defect = d3.scale.ordinal().domain(rangeBands).rangeRoundBands([0, width], .1);
var x_category_domain = x_defect.rangeBand() * rangeBands.length;
x_category.domain([0, x_category_domain]);
var y = d3.scale.linear()
.range([height, 0]);
y.domain([0, d3.max(data, function(cat) {
return d3.max(cat.values, function(def) {
return def.value;
});
})]);
var category_axis = d3.svg.axis()
.scale(x_category)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style('background-color', 'EFEFEF')
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
var category_g = svg.selectAll(".category")
.data(data)
.enter().append("g")
.attr("class", function(d) {
return 'category category-' + d.key;
})
.attr("transform", function(d) {
return "translate(" + x_category((d.cummulative * x_defect.rangeBand())) + ",0)";
})
.attr("fill", function(d) {
return color[d.key];
});
var category_label = category_g.selectAll(".category-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
//console.log(d)
return 'category-label category-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((d.values.length * x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 30;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
var defect_g = category_g.selectAll(".defect")
.data(function(d) {
return d.values;
})
.enter().append("g")
.attr("class", function(d) {
return 'defect defect-' + d.key;
})
.attr("transform", function(d, i) {
return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)";
});
var defect_label = defect_g.selectAll(".defect-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
//console.log(d)
return 'defect-label defect-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 10;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
var rects = defect_g.selectAll('.rect')
.data(function(d) {
return [d];
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", x_category(x_defect.rangeBand() - barPadding))
.attr("x", function(d) {
return x_category(barPadding);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
});
/* Styles go here */
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
</html>
最佳答案
试试这个方法:-
category_g
.append("line")
.style("stroke", "black")
.style("stroke-width", "2px")
.style("stroke-linecap","round")
.attr("x1", function(d) {
var bbox = this.parentNode.getBBox();
return bbox.width+5;
})
.attr("y1", height)
.attr("x2", function(d) {
var bbox = this.parentNode.getBBox();
return bbox.width;
})
.attr("y2", height + 50);
var margin = {
top: 20,
right: 20,
bottom: 60,
left: 40
},
width = 560 - margin.left - margin.right,
height = 360 - margin.top - margin.bottom;
var color = {
Mechanical: '#4A7B9D',
Electrical: '#54577C',
Hydraulic: '#ED6A5A'
};
var barPadding = 40;
var data = [{
key: 'Mechanical',
values: [{
key: 'Gear',
value: 11
}, {
key: 'Bearing',
value: 8
}, {
key: 'Motor',
value: 3
}]
}, {
key: 'Electrical',
values: [{
key: 'Switch',
value: 19
}, {
key: 'Plug',
value: 12
}, {
key: 'Cord',
value: 11
}, {
key: 'Fuse',
value: 3
}, {
key: 'Bulb',
value: 2
}]
}, {
key: 'Hydraulic',
values: [{
key: 'Pump',
value: 4
}, {
key: 'Leak',
value: 3
}, {
key: 'Seals',
value: 1
}]
}];
var rangeBands = [];
var cummulative = 0;
data.forEach(function(val, i) {
val.cummulative = cummulative;
cummulative += val.values.length;
val.values.forEach(function(values) {
values.parentKey = val.key;
rangeBands.push(i);
})
});
//console.log(data);
var x_category = d3.scale.linear()
.range([0, width]);
var x_defect = d3.scale.ordinal().domain(rangeBands).rangeRoundBands([0, width], .1);
var x_category_domain = x_defect.rangeBand() * rangeBands.length;
x_category.domain([0, x_category_domain]);
var y = d3.scale.linear()
.range([height, 0]);
y.domain([0, d3.max(data, function(cat) {
return d3.max(cat.values, function(def) {
return def.value;
});
})]);
var category_axis = d3.svg.axis()
.scale(x_category)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style('background-color', 'EFEFEF')
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
var category_g = svg.selectAll(".category")
.data(data)
.enter().append("g")
.attr("class", function(d) {
return 'category category-' + d.key;
})
.attr("transform", function(d) {
return "translate(" + x_category((d.cummulative * x_defect.rangeBand())) + ",0)";
})
.attr("fill", function(d) {
return color[d.key];
});
var category_label = category_g.selectAll(".category-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
//console.log(d)
return 'category-label category-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((d.values.length * x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 30;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
var defect_g = category_g.selectAll(".defect")
.data(function(d) {
return d.values;
})
.enter().append("g")
.attr("class", function(d) {
return 'defect defect-' + d.key;
})
.attr("transform", function(d, i) {
return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)";
});
var defect_label = defect_g.selectAll(".defect-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
//console.log(d)
return 'defect-label defect-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 10;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
var rects = defect_g.selectAll('.rect')
.data(function(d) {
return [d];
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", x_category(x_defect.rangeBand() - barPadding))
.attr("x", function(d) {
return x_category(barPadding);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
});
category_g
.append("line")
.style("stroke", "black")
.style("stroke-width", "4px")
.style("stroke-linecap","round")
.attr("x1", function(d) {
var bbox = this.parentNode.getBBox();
return bbox.width+7;
})
.attr("y1", height)
.attr("x2", function(d) {
var bbox = this.parentNode.getBBox();
return bbox.width;
})
.attr("y2", height + 50);
/* Styles go here */
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
</html>
关于javascript - 如何制作在 x 轴下方带有附加垂直线的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40168671/
我想在80个字符处添加一个标尺。我知道您可以add rulers to CodeMirror,但是我不知道是否应该将the corresponding javascript放在文件中的某个位置,或者放
我正在使用plotly包,并尝试向图形添加水平线。有什么办法使用plotly吗? 可以使用ggplot2和ggplotly函数完成此操作,如下所示: library(plotly) p % add
我想在 org.eclipse.xtext.ui.editor.embedded.EmbeddedEditor 中的 120 个字符后显示一条垂直线(Eclipse 措辞中的打印边距)。这是否以某种方
我的想法是制作一个几乎像 Lollipop 一样的圆圈(在我的例子中是一个矩形)的底部有一条无限长的垂直线。我读到这可以使用 css :after 来完成,但是 psuedoelements 确实限制
我正在尝试使用 Bootstrap 在中间设置一 strip 有按钮的垂直线。 使用Bootstrap简单竖线:
我想知道如何用一条直线连接两个 div 元素,这条直线的距离有点像本网站中的那条线: JSFiddle link: https://jsfiddle.net/mcbvb8m2/ 对于水平和垂直 div
我有一个数字类型的输入,我应该将输入的值格式化为返回字符串的特定格式,因此作为解决方案,我添加了第二个字符串类型的输入并隐藏了输入 [type=number] 但用户只看到输入 [type=strin
我正在尝试创建一个教育时间表。应该有一条垂直线(红色)从“毕业帽”后面开始,然后穿过所有时间线后(绿色)。 这是我到目前为止得到的: .iconspace { position: relati
对于给定的矩形 R1 我试图找出哪些是可以与其相交的其他矩形 IF 我画了一个 vector 线段。 与 R1 相交的矩形标记为红色。 每个矩形都由其(top, left) 和(bottom, rig
我想知道是否可以激活悬停在图形上方的垂直线并突出显示点? 例如,在此图中:http://www.highcharts.com/stock/demo/compare ->将鼠标悬停在图形线上时,每个系列
我需要在我的图文上放置一 strip 有标签的垂直线,例如本例中的国庆节线 - http://www.fusioncharts.com/dev/chart-attributes.html?chart=
IE11不支持播放作品音频文件。这就是为什么我使用 ogv.js javascript库在IE11中播放它的原因。该库将音频数据流传输到IE11的内部Flash Player并进行播放。问题是在并行播
我在 android 中使用 achartengine 图形库制作折线图。有人可以建议我放置十字准线(当用户触摸图表时在所有数据点上移动的垂直线)我的要求符合这样的实现 http://www.jqch
我正在为子菜单项制作 TreeView ,我快完成了。最后一个元素的问题,现在看起来如何: 我想看起来像: DEMO HTML: Example 1
如何像此处那样在我的网页边框周围创建边框? http://www.callieschweitzer.com/ 我尝试做一条水平线,但很难将其与垂直线对齐……不过我觉得有一种更简单的方法。有什么想法吗?
这个问题在这里已经有了答案: What does the vertical pipe ( | ) mean in C++? (4 个答案) 关闭 5 年前。 我用了双竖“||”作为 bool “或”
我使用 Pandoc (http://johnmacfarlane.net/pandoc/README.html) 及其 Markdown 处理器。当我使用 Pandoc 将下面的网格转换为 PDF(
谁能告诉我如何扩展 Chart.js v2.0。我需要折线图中的垂直线,我想实现类似于 http://jsfiddle.net/dbyze2ga/ 的东西. Chart.types.Line.exte
我已经创建了一个自定义通知 XML 文件。我想画一条垂直线,就像下图中的水平线一样。我一直在尝试各种方法无法实现它。 xml 中从水平到垂直的方向对我没有帮助。 查看下面的屏幕截图:我想要垂直线而不是
如何使用标准图像处理过滤器(来自 OpenCV)从图像中去除长水平和垂直线? 图像是黑白的,所以删除意味着简单地涂成黑色。 插图: 我目前正在用 Python 执行此操作,遍历像素行和列并检测连续像素
我是一名优秀的程序员,十分优秀!