Question

目前我正在开展一个小项目。在这个阶段，我在d3.js word cloud的帮助下有几个词云SVG。

现在我想使用JQuery UI使SVG的'text'元素可拖动，以便用户可以拖动文本元素然后将其放在某个区域（比如一个可放置的div）。

但经过多次尝试，似乎JQuery-UI与SVG不兼容。我比较了几个类似的问题，并尝试了我自己的代码，但没有一个有效。 this question的最高投票答案非常接近我想要的。文本元素是可拖动的，但是当我单击该元素时，它不会出现在正确的位置，它会出现在其他位置。并且元素也不能从其SVG容器中拖出。

这是我的JS代码：

var fill = d3.scale.category20();

function draw(words) {
  d3.select('#wordCloud').append("svg")
      .attr("width", 600)
      .attr("height", 600)
    .append("g")
      .attr("transform", "translate(300,300)")
    .selectAll("text")
      .data(words)
    .enter().append("text")
      .style("font-size", function(d) { return d.size + "px"; })
      .style("font-family", "Impact")
      .style("fill", function(d, i) { return fill(i); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; });
}

wordCloudData.map((model) => {
  let modelName = model.modelName;
  let wordsArray = model.specArray;
  var $title = $('<h4></h4>').text(modelName);
  $('#wordCloud').append($title);

  d3.layout.cloud().size([600, 600])
      .words(wordsArray.map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      // .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size * 0.6; })
      .on("end", draw)
      .start();
});


$(document).ready(function() {
  let wordCloudCount = $('#wordCloud svg').length;
  let svgArray = $('#wordCloud svg').clone();
  let titleArray = $('#wordCloud h4').clone();
  for (let i = 0; i < wordCloudCount; i++) {
    let $wordCloudDiv = $('<div></div>').attr('class', 'wordCloud');
    let $title = titleArray[i];
    let $svg = svgArray[i];
    $wordCloudDiv.append($title);
    $wordCloudDiv.append($svg);
    $('#wordCloudFinal').append($wordCloudDiv);
  }
  $('#wordCloud').hide();

  $('text')
  .draggable()
  .bind('mousedown', function(event, ui){
    $(event.target.parentElement).append( event.target );
  })
  .bind('drag', function(event, ui){
    event.target.setAttribute('x', ui.position.left);
    event.target.setAttribute('y', ui.position.top);
  });

});

这是我的HTML代码：

<div class="container">
  <div id="wordCloud"></div>
  <div id="wordCloudFinal"></div>
</div>

如何将拖动的文本元素放在正确的位置？

0 个答案: