个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
使用 D3 生成 SVG 饼图如何垂直对齐文本，如图所示。
下面的示例代码显示了水平文本，我尝试的一切都不起作用。
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var fs = 33;
if(w > h){
w = w / 1.5;
} else {
h = h / 1.5;
}
if(w > h){
fs = h /25;
} else {
fs = w /25;
}
var padding = {top:20, right:40, bottom:0, left:0},
w = w - padding.left - padding.right,
h = h - padding.top - padding.bottom,
r = Math.min(w, h)/2,
rotation = 0,
oldrotation = 0,
picked = 100000,
oldpick = [],
color = d3.scale.category20();//category20c()
var data = [
{"label":"100", "value":1, "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
{"label":"200", "value":1, "question":"What CSS property is used for changing the font?"}, //font-family
{"label":"300", "value":1, "question":"What CSS property is used for changing the color of text?"}, //color
{"label":"400", "value":1, "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
{"label":"500", "value":1, "question":"What CSS property is used for changing the size of text?"}, //font-size
{"label":"600", "value":1, "question":"What CSS property is used for changing the background color of a box?"}, //background-color
{"label":"700", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
{"label":"GRAND", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
{"label":"", "value":1, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
{"label":"100", "value":1, "question":"With CSS selectors, what character prefix should one use to specify a class?"}, //period
{"label":"200", "value":1, "question":"With CSS selectors, what character prefix should one use to specify an ID?"}, //pound sign
{"label":"300", "value":1, "question":"In an HTML document, which tag holds all of the content people see?"}, //<body>
{"label":"400", "value":1, "question":"In an HTML document, which tag indicates an unordered list?"}, //<ul>
{"label":"500", "value":1, "question":"In an HTML document, which tag indicates the most important heading of your document?"}, //<h1>
{"label":"600", "value":1, "question":"What CSS property is used for specifying the area outside a box?"}, //margin
{"label":"700", "value":1, "question":"What type of bracket is used for HTML tags?"}, //< >
{"label":"", "value":1, "question":"What type of bracket is used for CSS rules?"}, // { }
{"label":"100", "value":1, "question":"Which HTML tag is used for specifying a paragraph?"}, //<p>
{"label":"200", "value":1, "question":"What should always be the very first line of code in your HTML?"}, //<!DOCTYPE html>
{"label":"300", "value":1, "question":"What HTML tag holds all of the metadata tags for your page?"}, //<head>
{"label":"400", "value":1, "question":"In CSS, what character separates a property from a value?"}, // colon
{"label":"500", "value":1, "question":"What HTML tag holds all of your CSS code?"}, // <style>
{"label":"600", "value":1, "question":"What file extension should you use for your web pages?"}, // .html
{"label":"700", "value":1, "question":"Which coding language is used for marking up content and structure on a web page?"}, // HTML
{"label":"", "value":1, "question":"Which coding language is used for specifying the design of a web page?"}, // CSS
// {"label":"SAMSUNG NOTE5", "value":1, "question":"Which coding language is used for adding functionality to a web page?"}, // JavaScript
// {"label":"HP DESKTOP", "value":1, "question":"What CSS property is used for making the edges of a box visible?"}, // border
// {"label":"15,000,000$", "value":1, "question":"What character symbol is used at the end of each CSS statement?"},//semi-colon
// {"label":"BUGGATI", "value":1, "question":"By default, how wide is a <div> box?"}, //100%
// {"label":" GOOGLE JOB", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"} //comma
];
var svg = d3.select('#chart')
.append("svg")
.data([data])
//.style("display", "flex")
.attr("width", w + padding.left + padding.right)
.attr("height", h + padding.top + padding.bottom);
var container = svg.append("g")
.attr("class", "chartholder")
.attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
var vis = container
.append("g");
var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("g")
.attr("class", "slice");
arcs.append("path")
.attr("fill", function(d, i){ return color(i); })
.attr("d", function (d) { return arc(d); });
// add the text
arcs.append("text")
.attr("transform", function(d){
d.innerRadius = 0;
d.outerRadius = r;
d.angle = (d.startAngle + d.endAngle)/2;
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 10) +")";
})
.attr("text-anchor", "end")
.style("font-size", fs)
.text( function(d, i) {
return data[i].label;
});
container.on("click", spin);
function spin(d){
container.on("click", null);
//all slices have been seen, all done
console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
if(oldpick.length == data.length){
console.log("done");
container.on("click", null);
return;
}
var ps = 360/data.length,
pieslice = Math.round(1440/data.length),
rng = Math.floor((Math.random() * 1440) + 360);
rotation = (Math.round(rng / ps) * ps);
picked = Math.round(data.length - (rotation % 360)/ps);
picked = picked >= data.length ? (picked % data.length) : picked;
if(oldpick.indexOf(picked) !== -1){
d3.select(this).call(spin);
return;
} else {
oldpick.push(picked);
}
rotation += 90 - Math.round(ps/2);
vis.transition()
.duration(3000)
.attrTween("transform", rotTween)
.each("end", function(){
//mark question as seen
d3.select(".slice:nth-child(" + (picked + 1) + ") path")
.attr("fill", "#111");
//populate question
d3.select("#question h1")
.text(data[picked].question);
oldrotation = rotation;
container.on("click", spin);
});
}
//make arrow
svg.append("g")
.attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
.append("path")
.attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
.style({"fill":"black"});
//draw spin circle
container.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 60)
.style({"fill":"white","cursor":"pointer"});
//spin text
container.append("text")
.attr("x", 0)
.attr("y", 15)
.attr("text-anchor", "middle")
.text("SPIN")
.style({"font-weight":"bold", "font-size":"30px"});
function rotTween(to) {
var i = d3.interpolate(oldrotation % 360, rotation);
return function(t) {
return "rotate(" + i(t) + ")";
};
}
text{
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
pointer-events:none;
}
#chart{
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
text-align: center;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari 7.0+ */
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#question{
position: absolute;
width:100vw;
height:100vh;
top:0;
left:0;
pointer-events: none;
}
#question h1{
font-size: 50px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
padding: 0;
margin: 0;
top:50%;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wheel of Fortune Bingo</title>
</head>
<body>
<div id="chart"></div>
<div id="question"><h1></h1></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>最佳答案
一种可能的解决方案是使用 glyph-orientation-vertical .但是，我相信附加单独的 <tspan>元素更容易控制。
因此，将每个字符串转换为一个字母数组，在您的文本选择中附加为 tspan:
textSelection.selectAll(null)
.data((_,i) => data[i].label)
.enter()
.append("tspan")
.attr("rotate", 90)
//etc...
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var fs = 33;
if(w > h){
w = w / 1.5;
} else {
h = h / 1.5;
}
if(w > h){
fs = h /25;
} else {
fs = w /25;
}
var padding = {top:20, right:40, bottom:0, left:0},
w = w - padding.left - padding.right,
h = h - padding.top - padding.bottom,
r = Math.min(w, h)/2,
rotation = 0,
oldrotation = 0,
picked = 100000,
oldpick = [],
color = d3.scale.category20();//category20c()
var data = [
{"label":"100", "value":1, "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
{"label":"200", "value":1, "question":"What CSS property is used for changing the font?"}, //font-family
{"label":"300", "value":1, "question":"What CSS property is used for changing the color of text?"}, //color
{"label":"400", "value":1, "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
{"label":"500", "value":1, "question":"What CSS property is used for changing the size of text?"}, //font-size
{"label":"600", "value":1, "question":"What CSS property is used for changing the background color of a box?"}, //background-color
{"label":"700", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
{"label":"GRAND", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
{"label":"", "value":1, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
{"label":"100", "value":1, "question":"With CSS selectors, what character prefix should one use to specify a class?"}, //period
{"label":"200", "value":1, "question":"With CSS selectors, what character prefix should one use to specify an ID?"}, //pound sign
{"label":"300", "value":1, "question":"In an HTML document, which tag holds all of the content people see?"}, //<body>
{"label":"400", "value":1, "question":"In an HTML document, which tag indicates an unordered list?"}, //<ul>
{"label":"500", "value":1, "question":"In an HTML document, which tag indicates the most important heading of your document?"}, //<h1>
{"label":"600", "value":1, "question":"What CSS property is used for specifying the area outside a box?"}, //margin
{"label":"700", "value":1, "question":"What type of bracket is used for HTML tags?"}, //< >
{"label":"", "value":1, "question":"What type of bracket is used for CSS rules?"}, // { }
{"label":"100", "value":1, "question":"Which HTML tag is used for specifying a paragraph?"}, //<p>
{"label":"200", "value":1, "question":"What should always be the very first line of code in your HTML?"}, //<!DOCTYPE html>
{"label":"300", "value":1, "question":"What HTML tag holds all of the metadata tags for your page?"}, //<head>
{"label":"400", "value":1, "question":"In CSS, what character separates a property from a value?"}, // colon
{"label":"500", "value":1, "question":"What HTML tag holds all of your CSS code?"}, // <style>
{"label":"600", "value":1, "question":"What file extension should you use for your web pages?"}, // .html
{"label":"700", "value":1, "question":"Which coding language is used for marking up content and structure on a web page?"}, // HTML
{"label":"", "value":1, "question":"Which coding language is used for specifying the design of a web page?"}, // CSS
// {"label":"SAMSUNG NOTE5", "value":1, "question":"Which coding language is used for adding functionality to a web page?"}, // JavaScript
// {"label":"HP DESKTOP", "value":1, "question":"What CSS property is used for making the edges of a box visible?"}, // border
// {"label":"15,000,000$", "value":1, "question":"What character symbol is used at the end of each CSS statement?"},//semi-colon
// {"label":"BUGGATI", "value":1, "question":"By default, how wide is a <div> box?"}, //100%
// {"label":" GOOGLE JOB", "value":1, "question":"What character symbol do I use to specify multiple CSS selectors in one code block?"} //comma
];
var svg = d3.select('#chart')
.append("svg")
.data([data])
//.style("display", "flex")
.attr("width", w + padding.left + padding.right)
.attr("height", h + padding.top + padding.bottom);
var container = svg.append("g")
.attr("class", "chartholder")
.attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
var vis = container
.append("g");
var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("g")
.attr("class", "slice");
arcs.append("path")
.attr("fill", function(d, i){ return color(i); })
.attr("d", function (d) { return arc(d); });
// add the text
arcs.append("text")
.attr("transform", function(d){
d.innerRadius = 0;
d.outerRadius = r;
d.angle = (d.startAngle + d.endAngle)/2;
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 10) +")";
})
.attr("text-anchor", "end")
.style("font-size", fs)
.selectAll(null)
.data((_,i)=>data[i].label)
.enter()
.append("tspan")
.attr("rotate", "90")
.attr("dx", (_,i)=> i ? "-1.5em" : null)
.attr("y", 0)
.text( function(d) {
return d
});
container.on("click", spin);
function spin(d){
container.on("click", null);
//all slices have been seen, all done
console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
if(oldpick.length == data.length){
console.log("done");
container.on("click", null);
return;
}
var ps = 360/data.length,
pieslice = Math.round(1440/data.length),
rng = Math.floor((Math.random() * 1440) + 360);
rotation = (Math.round(rng / ps) * ps);
picked = Math.round(data.length - (rotation % 360)/ps);
picked = picked >= data.length ? (picked % data.length) : picked;
if(oldpick.indexOf(picked) !== -1){
d3.select(this).call(spin);
return;
} else {
oldpick.push(picked);
}
rotation += 90 - Math.round(ps/2);
vis.transition()
.duration(3000)
.attrTween("transform", rotTween)
.each("end", function(){
//mark question as seen
d3.select(".slice:nth-child(" + (picked + 1) + ") path")
.attr("fill", "#111");
//populate question
d3.select("#question h1")
.text(data[picked].question);
oldrotation = rotation;
container.on("click", spin);
});
}
//make arrow
svg.append("g")
.attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
.append("path")
.attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
.style({"fill":"black"});
//draw spin circle
container.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 60)
.style({"fill":"white","cursor":"pointer"});
//spin text
container.append("text")
.attr("x", 0)
.attr("y", 15)
.attr("text-anchor", "middle")
.text("SPIN")
.style({"font-weight":"bold", "font-size":"30px"});
function rotTween(to) {
var i = d3.interpolate(oldrotation % 360, rotation);
return function(t) {
return "rotate(" + i(t) + ")";
};
}text{
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
pointer-events:none;
}
#chart{
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
text-align: center;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari 7.0+ */
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#question{
position: absolute;
width:100vw;
height:100vh;
top:0;
left:0;
pointer-events: none;
}
#question h1{
font-size: 50px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
padding: 0;
margin: 0;
top:50%;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wheel of Fortune Bingo</title>
</head>
<body>
<div id="chart"></div>
<div id="question"><h1></h1></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>data() ，这会将其转换为数组。但是，这种行为随时可能改变；因此，为了提高可靠性，请自行将字符串转换为数组，例如使用
String.prototype.split() .
关于javascript - 使用D3生成SVG饼图如何垂直对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59204677/
27
4
0
我想填充 3D 等高线图 (contour3(X,Y,Z))，就像 2D 等高线填充图 (contourf(X,Y,Z))。但我无法弄清楚如何实现这一目标。 contour3 和 surf 的组合不是
我有一个 c3.js 折线图，表示 2 个值的演变。我需要折线图的工具提示是饼图(工具提示 = 另一个 c3.js 图形)。 这是我成功的: http://jsfiddle.net/owhxgaqm/
我有具有结构的 Pandas 数据框: A B 0 1 1 1 2 1 2 3 4 3 3 7 4 6 8 如何生成 Seaborn Violin 图，每列作为其自己的单独
我正在使用 D3DXSPRITE 方法将我的 map 图 block 绘制到屏幕上，我刚刚添加了一个缩放功能，当您按住向上箭头时会放大，但注意到您现在可以看到图 block 之间的间隙，这是一些屏幕截
今天我们开始学习目前学习到的最难最复杂的数据结构图。 简单回顾一下之前学习的数据结构，数组、单链表、队列等线性表中数据元素是一对一关系，而树结构中数据元素是一对多关系，而图结构中数据元素则是多对
1、系统环境如下图： 2、为该系统添加一块新的虚拟硬盘，添加后需重启虚拟机，否则系统不识别；如下图，/dev/sdc 是新添加的硬盘； 3、fdisk /dev/sdc为新硬盘创建分区：
1、nagios简介 nagios是一款开源的电脑系统和网络监视工具，能有效监控windows、linux和unix的主机状态，交换机路由器等网络设置，打印机等。在系统或服务状态异常时发
越来越多人开始习惯用手机上网，浏览网页、查看邮件···移动化已经成为互联网发展必然趋势，包括facebook在内的很多互联网公司都将移动广告作为下一个淘金地
1.图片处理 1.圆角图片 复制代码 代码如下: /** * 转换成圆角 * &n
Microsoft SQL Server Management Studio是SQL SERVER的客户端工具，相信大家都知道。我不知道大伙使用导入数据的情况怎么样，反正我最近是遇到过。主要是因为没
debian6系统： 首先先安装mysql吧： 打开终端（root）用户登入 apt-get purge mysql-server-5.5 安装完成后： 默认情况下Mysql只允许本地登录
fedora16英文环境下支持中文输入法的方法 fedora16英文环境下支持FCITX的中文输入法： $ im-chooser 就会出现选择界面，选择第二个就行了。
Net预编译命令 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_compiler.exe -? 显示说明 我们需要选择的命令为&n
有的时候电脑出现一些故障有的时候通过将其修改bios设置的方法来解决故障，那么在bios上设置能不能将电脑恢复出厂设置呢?其实也是可以的。方法也很简单的，只要会进入电脑的bios懂的上面英文的意思就
笔者曾介绍过Deepin 将对龙芯进行全面支持，打造最优美龙芯电脑桌面。现在Deepin团队移植工作取得了突破性的成果，Deepin桌面已经在龙芯3A和龙芯3B电脑上成功运行起来了。 以下为龙芯3
在安装一些软件之后，我们的电脑总是会发生一点小变化，不是桌面上多了几个网址图标，就是IE浏览器的默认主页被篡改成乱七八糟的网址。最可气的是，在IE设置中将默认主页改回来后，下次启动Win7后又变了回
“注册表编辑器怎么打开”虽说不是很难的问题，但是对于对电脑常识不是很擅长的网民来说，当电脑出现问题或需要更改设置时，着实还是件头疼的问题。因为需要打开注册表进行操作解决。那么如何打开注册表编辑器呢?
这篇文章重点介绍10个重要的WordPress安全插件和技巧，用来保护WordPress网站或者博客。 1. WP Security 人工帮助你修复被黑客入侵的网站，只要按照他们网站上的联系电话
其实运用object和javascript调用外部文件，也能实现不同栏目调用不同友情链接，即相当于调用不同栏目友情链接文件， {dede:field.typeid/}来获取当前栏目的ID。
我有一个复值矩阵。 如果我发出命令: plot(myMatrix) 然后它在图形设备上显示一种散点图，X 轴标记为 Re(myMatrix)，Y 轴标记为 Im(myMatrix)。这显示了我正在寻找
我是一名优秀的程序员,十分优秀！