小编use*_*072的帖子

我将d3与svg：foreignObject一起使用，以创建一个格式化的文本框，该文本框显示在悬停数据点旁边。以下策略在Chrome浏览器中可以很好地运行，但是foreignObject在Safari中不可见。Safari检查器在DOM中，正确的位置以及所有正确的数据中显示foreignObject。我只是看不到！我想念什么？

我的代码如下所示：

var description = svg.append('foreignObject')
  .attr('class', 'description')
  .attr('id', 'desc')
  .attr('x', x)
  .attr('y', y)
  .attr('width', width);

var descdiv = description.append('xhtml:div')
  .append('div')
  .attr('id', 'textBox');

descdiv.append('p')
  .attr('class', 'text1')
  .attr('dy', '1em')
  .html('First line');

descdiv.append('p')
  .attr('class', 'text2')
  .attr('dy', '2em')
  .html('<tspan class="text3">' + 'Second line 1st part + '</tspan><tspan class="text4">' + ', ' + 'Second line 2nd part' + '</tspan>');

descdiv.append('p')
  .attr('class', 'text1')
  .attr('dy', '3em')
  .html('Third line');

编辑
原来的问题是，foreignObject需要一个height属性才能在Safari中显示（有趣的是，不在Chrome中显示）。我可以在上面之后设置高度，如下所示：

d3.select('#desc').attr('height', height);

但是现在的问题是获取没有高度属性的文本框的高度（因为高度需要随文本的长度而变化）。我认为类似getComputedTextLength的方法可能会起作用，但是我不太清楚。任何建议，不胜感激。

我knex seed在 Node 中运行 a并且由于我的服务器的限制需要对我的数据库进行批处理。我开始掌握 Promise 和 async/await 的窍门，但是我无法让它在多个级别深度工作（此时特别让我失望的是它似乎干扰了批处理我无法理解的方式）。我的seed文件看起来像这样：

exports.seed = async function(knex) {
  const fs = require('fs');
  const _ = require('lodash');

  function get_event_id(location) {
    return knex('events')
      .where({location: location})
      .first()
      .then(result => { return result['id']; })
      .finally(() => { knex.destroy() })
  }

  function createImage(row, event_id) {
    return {
      name: row[4],
      event_id: event_id
    }
  };

  async function run_query(line) {
      let row = line.split(',');
      let event_id = await get_event_id(row[0]);
      return createImage(row, event_id);
  };

  async function run_batch(batch) {

      return …