调整圆圈大小文字和svg大小 [英] Adjusting circle size text and svg size
本文介绍了调整圆圈大小文字和svg大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是新的JavaScript程序员.我正在尝试根据窗口的大小调整圆圈的大小和svg的大小.而且,该代码现在可以创建不同大小的圆,但是无法同时调整为文本大小.
I am a new javascript programmer. I'm trying to adjust the circles' size and svg size given the size of the window. Also, the code now creates circles of different sizes, but haven't been able to simultaneously adjust to the text size.
var width = 600;
var height = 600;
// Place your JSON here.
var data = [
{ CategoryName: 'Adaptive Security', SkillProficiencyId: 1 },
{ CategoryName: 'Programmer', SkillProficiencyId: 2 },
{ CategoryName: 'Coffee Drinker', SkillProficiencyId: 3 }
];
/*
This 'cxBase' will be multiplied by element's index, and sum with offset.
So for 3 elements, cx = 0, 200, 400 ...
All these values changeable by this vars.
*/
const cxBase = 200;
const cxOffset = 100;
console.log(data);
// Make SVG container
var svgContainer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// This function will iterate your data
data.map(function(props, index) {
var cx = cxBase * (index) + cxOffset; // Here CX is calculated
var elem = svgContainer.selectAll("div").data(data);
var elemEnter = elem.enter()
.append("g")
var circles = elemEnter.append("circle")
.attr("cx", cx)
.attr("cy", 100)
.attr("r", props.SkillProficiencyId * 20)
.style("fill", "blue");
elemEnter
.append("text")
.style("fill", "white")
.attr("dy", function(d){
return 105;
})
.attr("dx",function(d){
return cx - (props.CategoryName.length * 3.5);
})
.text(function (d) {
return props.CategoryName
});
});
到目前为止,无法使用.attr("viewBox", "0 0 680 490")
.只是使所有圆圈变大,但不与窗口成比例
Using .attr("viewBox", "0 0 680 490")
doesn't work so far. Just makes all the circles bigger but not in proportion to the window
// Make SVG container
var svgContainer = d3.select("body")
.append("svg")
.attr("viewBox", "0 0 680 490")
.attr("presserveAspectRatio", "xMinYMin meet")
//.attr("height", height)
;
推荐答案
我进行了五项改进:
- 基于
SkillProficiencyId
的圆的宽度. - 将svg宽度从
600
增大到900
. - 文本将始终出现在圆圈的中间:
text.style("text-anchor", "middle")
起到了作用. - 与圆圈大小成正比的文本大小;
- 计算圆dx的最聪明方法(不使用人工偏移);
- Circle's width based on
SkillProficiencyId
. - Increased the svg width from
600
to900
. - Text will appear always on the middle of the circle:
text.style("text-anchor", "middle")
did the trick. - Text size proportional to circle size;
- A smartest way to calc circle dx (w/o using arbritary offsets);
代码笔: https://codepen.io/mayconmesquita/pen/RwWoZbv
JS代码:
var width = 900;
var height = 400;
// Place your JSON here.
var data = [
{ CategoryName: 'Adaptive Security', SkillProficiencyId: 1 },
{ CategoryName: 'Programmer', SkillProficiencyId: 2 },
{ CategoryName: 'Coffee Lover', SkillProficiencyId: 3 },
{ CategoryName: 'Coffee Roaster', SkillProficiencyId: 4 }
];
function getCircleSize(SkillProficiencyId) {
var minSize = 60;
return minSize + (minSize * (SkillProficiencyId * .2));
}
// Make SVG container
var svgContainer = d3
.select("body")
.classed("svg-container", true)
.append("svg")
.attr("width", width)
.attr("height", height);
// This function will iterate your data
data.map(function(props, index) {
/*
The new CX calc:
('circleSize' * 2) will be multiplied by element's index.
So for 3 elements, cx = 70, 140, 210 ...
All these values changeable by this vars.
*/
var circleSize = getCircleSize(props.SkillProficiencyId);
var cx = (circleSize * 2) * (index); // Here CX is calculated
var elem = svgContainer.selectAll("div").data(data);
var elemEnter = elem
.enter()
.append("g")
.attr("transform", "translate(100, 0)"); // prevent svg crops first circle
var circles = elemEnter
.append("circle")
.attr("cx", cx)
.attr("cy", 160)
.attr("r", circleSize)
.style("fill", "blue");
elemEnter
.append("text")
.style("fill", "white")
.attr("dy", 165)
.attr("dx", cx)
.text(props.CategoryName)
.style("font-size", ((circleSize * .2) + index) + "px")
.style("text-anchor", "middle");
});
这篇关于调整圆圈大小文字和svg大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文