调整圆圈大小文字和svg大小 [英] Adjusting circle size text and svg size

问题描述

我是新的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)
    ;

推荐答案

我进行了五项改进:

1. 基于SkillProficiencyId的圆的宽度.
2. 将svg宽度从600增大到900.
3. 文本将始终出现在圆圈的中间:text.style("text-anchor", "middle")起到了作用.
4. 与圆圈大小成正比的文本大小；
5. 计算圆dx的最聪明方法(不使用人工偏移)；

1. Circle's width based on SkillProficiencyId.
2. Increased the svg width from 600 to 900.
3. Text will appear always on the middle of the circle: text.style("text-anchor", "middle") did the trick.
4. Text size proportional to circle size;
5. 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屋！