d3 - рендеринг html-таблицы поверх элемента svg

Question

Я пытаюсь динамически создавать таблицы html с помощью d3. Им нужно будет перетащить и использовать другие функции svg, чтобы их нужно было создать внутри элемента svg. Поскольку svg не разрешает таблицы, я создал таблицу внутри постороннего объекта. Я не могу написать шаблон html сначала, потому что не знаю, сколько строк/столбцов и т. Д. Будет передано в данных. У меня есть HTML-часть работает, но он не позволяет мне, чтобы преобразовать его в нужный формат с помощью «XHTML: элемент»:

var svg = d3.select('svg'); 
      svg.append("foreignObject") 
      .attr("width", 200) 
      .attr("height", 400); 
      var table = d3.select('foreignObject').append("xhtml:table"); 

      // append header row 
      table.append('xhtml:thead').append('xhtml:tr') 
      .selectAll('xhtml:th') 
      .data(scope.columns).enter() 
      .append('xhtml:th') 
      .attr('class', function (d) { return d.cl; }) 
      .text(function (d) { return d.head; }); 

      // append body rows 
      table.append('xhtml:tbody') 
      .selectAll('xhtml:tr') 
      .data(scope.movies).enter() 
      .append('xhtml:tr') 
      .selectAll('xhtml:td') 
      .data(function (row, i) { 
      // evaluate column objects against the current row 
      return scope.columns.map(function (c) { 
       var cell = {}; 
       d3.keys(c).forEach(function (k) { 
       cell[k] = typeof c[k] == 'function' ? c[k](row, i) : c[k]; 
       }); 
       return cell; 
      }); 
      }).enter() 
      .append('xhtml:td') 
      .html(function (d) { return d.html; }) 
      .attr('class', function (d) { return d.cl; }); 

Вот наборы данных образцов я тестирую с:

scope.movies = [ 
      { title: "The Godfather", year: 1972, length: 175, 
       budget: 6000000, rating: 9.1 }, 
      { title: "The Shawshank Redemption", year: 1994, 
       length: 142, budget: 25000000, rating: 9.1 }, 
      { title: "The Lord of the Rings 3", year: 2003, 
       length: 251, budget: 94000000, rating: 9 } 
     ]; 
     scope.columns = [ 
      { head: 'Movie title', cl: 'title', html: function (d) { return d.title; } }, 
      { head: 'Year', cl: 'center', html: function (d) { return d.year; } }, 
      { head: 'Length', cl: 'center', html: function (d) { return d.length; } }, 
      { head: 'Budget', cl: 'num', html: function (d) { return d.budget; } }, 
      { head: 'Rating', cl: 'num', html: function (d) { return d.rating; } } 
     ]; 

В настоящее время в этом формате я получаю сообщение об ошибке: 'Не удалось выполнить' querySelectorAll 'on' Element ':' xhtml: th 'не является допустимым селектором.'

Answer 1

У меня нет веской причины, почему .selectAll('xhtml:td') не работает, возможно, это не поддерживается.

Но я попытался следующие, и она работала мысль поделиться с вами:

var table = svg.append("foreignObject") 
    .attr("width", 480) 
    .attr("height", 500) 
    .append("xhtml:body")//append body to foreign object(this is missing in your code) 

Тогда вы можете просто добавить элементы, как вы привыкли делать в d3, как показано ниже.

table.append("table") 
    // append header row 
table.append('thead').append('tr') 
    .selectAll('th')//select using normal selector without xhtml 
    .data(scope.columns).enter() 

Рабочий код here

Надеется, что это помогает!