根据d3.js中的矩形大小调整文本字体大小

Question

我正在尝试根据矩形的大小调整条内文本的字体大小。如fiddle所示，矩形的宽度会根据数据而改变。

我尝试根据矩形的宽度调整字体大小：

 var bar = svg.selectAll('g')
  .data(tasks)
  .enter()
  .append('g')
  .attr('transform', rectTransform)

  bar.append("rect")
  .attr("rx", 5)
  .attr("ry", 5)
  .attr("y", 0)
  .attr("fill", function(d){return d.color})
  .attr("height", function(d) { return 70; })
  .attr("width", function(d) { 
    return (x(d.endDate) - x(d.startDate)); 
  });

  bar.append("text")
  .attr('y', 10)
  .attr('dy', '.35em')
  .style("font-size", function(){
        return d3.select(this.previousSibling).attr("width") * 0.006 + 'px'
        })
  .text(function(d){return d.taskName})

这种方法效果不佳，对于某些条形图而言，文字可能会非常大或非常小。

我也发现了使用vw度量单位而非px度量单位来设置字体大小，这种方式可以根据视口调整字体大小，但我关心的是矩形的大小而非整个屏幕大小，因此也不是一个好选择。

有没有一种方法可以根据条形图的大小（高度/宽度）来调整文本的font-size？

- dsax7

---

请查看 https://dev59.com/XmQo5IYBdhLWcg3wbe_r?rq=1 以获取一些选项。 - i alarmed alien

以及 https://dev59.com/k2gu5IYBdhLWcg3w4625 - i alarmed alien

Answer 1

你可以使用xscale来生成字体大小。

.attr("font-size", d => `${(x(d.endDate) - x(d.startDate))/5}px`)

d3.gantt = function() {
  var FIT_TIME_DOMAIN_MODE = "fit";

  var margin = {
    top: 20,
    right: 40,
    bottom: 20,
    left: 150
  };
  var timeDomainStart = d3.timeDay.offset(new Date(), -3);
  var timeDomainEnd = d3.timeHour.offset(new Date(), +3);
  var timeDomainMode = FIT_TIME_DOMAIN_MODE; // fixed or fit
  var taskTypes = ["D Job", "P Job", "E Job", "A Job", "N Job"];
  var height = document.body.clientHeight - margin.top - margin.bottom - 5;
  var width = document.body.clientWidth - margin.right - margin.left - 5;

  var tickFormat = "%y %b";

  var rectTransform = function(d) {
    return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")";
  };

  var x, y, xAxis, yAxis;

  initAxis();

  var initTimeDomain = function() {
    if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
      if (tasks === undefined || tasks.length < 1) {
        timeDomainStart = d3.time.day.offset(new Date(), -3);
        timeDomainEnd = d3.time.hour.offset(new Date(), +3);
        return;
      }
      tasks.sort(function(a, b) {
        return a.endDate - b.endDate;
      });
      timeDomainEnd = tasks[tasks.length - 1].endDate;
      tasks.sort(function(a, b) {
        return a.startDate - b.startDate;
      });
      timeDomainStart = tasks[0].startDate;
    }
  };

  function initAxis() {
    x = d3.scaleTime().domain([timeDomainStart, timeDomainEnd]).range([0, width]).clamp(true);

    y = d3.scaleBand().domain(taskTypes).rangeRound([0, height - margin.top - margin.bottom], 0.1);

    xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(tickFormat))
      .tickSize(8).tickPadding(8);

    yAxis = d3.axisLeft().scale(y).tickSize(0);
  }

  function gantt(tasks) {

    initTimeDomain();
    initAxis();

    var svg = d3.select("body")
      .append("svg")
      .attr("class", "chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class", "gantt-chart")
      .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

    var bar = svg.selectAll('g')
      .data(tasks)
      .enter()
      .append('g')
      .attr('transform', rectTransform)

    bar.append("rect")
      .attr("rx", 5)
      .attr("ry", 5)
      .attr("y", 0)
      .attr("fill", function(d) {
        return d.color
      })
      .attr("height", function(d) {
        return 70;
      })
      .attr("width", function(d) {
        return (x(d.endDate) - x(d.startDate));
      });

    bar.append("text")
      .attr('y', 10)
      .attr('dy', '.35em')
      .attr("font-size", d => `${(x(d.endDate) - x(d.startDate))/5}px`)
      .text(function(d) {
        return d.taskName
      })

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0, " + (height - margin.top - margin.bottom) + ")")
      .transition()
      .call(xAxis);

    var legend = svg.selectAll(".legend")
      .data(tasks)
      .enter()
      .append("g")

    legend.append("rect")
      .attr("fill", function(d) {
        return d.color
      })
      .attr("width", 10)
      .attr("height", 15)
      .attr("x", -100)
      .attr("y", function(d, i) {
        return 20 + 20 * i
      })

    legend.append("text")
      .attr("y", function(d, i) {
        return 32 + 20 * i
      })
      .attr("x", -90)
      .text(function(d) {
        return d.taskName
      });

    svg.append("g").attr("class", "y axis").transition().call(yAxis);

    return gantt;

  };


  return gantt;
};

var tasks = [{
    "startDate": new Date(2018, 8),
    "endDate": new Date(2018, 10),
    "taskName": "E Job",
    "color": "blue"
  },
  {
    "startDate": new Date(2018, 4),
    "endDate": new Date(2018, 11),
    "taskName": "D Job",
    "color": "red"
  },
  {
    "startDate": new Date(2018, 7),
    "endDate": new Date(2018, 9),
    "taskName": "N Job",
    "color": "green"
  },
  {
    "startDate": new Date(2018, 1),
    "endDate": new Date(2018, 9),
    "taskName": "A Job",
    "color": "brown"
  },
  {
    "startDate": new Date(2018, 2),
    "endDate": new Date(2018, 4),
    "taskName": "E Job",
    "color": "purple"
  },
];
var gantt = d3.gantt();
gantt(tasks);

html,
body,
#wrapper {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.chart {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: #33b5e5;
}

.bar-failed {
  fill: #CC0000;
}

.bar-running {
  fill: #CC0000;
}

.bar-succeeded {
  fill: #33b5e5;
}

.bar-killed {
  fill: #ffbb33;
}

#forkme_banner {
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 10;
  padding: 10px 50px 10px 10px;
  color: #fff;
  background: url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png') #0090ff no-repeat 95% 50%;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-decoration: none;
}

<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>

{{link1：Fiddle}}

- ksav

---

当将“X job”替换为长度不同的实际文本字符串时会发生什么？或者使用非常长的作业时呢？如果使用此技术，则应添加适当的y偏移量，以使文本不会超出rect对象。 - i alarmed alien

Answer 2

使用 ksav 方法，但调整为使用上矩形的高度（这里常量为 70，但使用基于 d 设置 height 的表达式）和矩形中的文本

  bar.append("text")
    .attr('y', 10)
    .attr('dy', '.7em')
    .attr("font-size", d => `${Math.min( (x(d.endDate) - x(d.startDate))/d.taskName.length, 70)}px`)
    .text(d => d.taskName );

- rioV8