在字符串中添加带空格的元素

Question

我在d3js中使用foreigobject追加一个html元素。这是html

.html(function(d) {return "<span onclick=processParams('"+str+"')><i class='fa fa-plus-circle'></i></span>";})

问题是如果str值包含空格，它就会中断。所以对于＆＃39; xyz＆＃39;的str值。我得到了元素，

<span onclick="processParams('xyz')"><i class="fa fa-plus-circle"></i></span>

但是对于＆＃39; xyz abc＆＃39;的str值。不知怎的，它变成了，

<span onclick="processParams('xyz" abc')=""><i class="fa fa-plus-circle"></i></span>

我做错了什么？

Answer 1

您需要引用您的属性。

你的第二个例子是返回HTML：

<span onclick=processParams('xyz abc')><i class='fa fa-plus-circle'></i></span>

由于您没有引用，因此＆＃39; onclick＆＃39;当它击中空间时结束。余数（abc')）被视为另一个参数名称，没有任何价值。

尝试：

.html(
  function(d) 
  {
    return "<span onclick=\"processParams('"+str+"')\"><i class='fa fa-plus-circle'></i></span>";
  }
 );

Answer 2

为什么不用d3.js方式呢？

.append("span")
    .on("click", function(){
        processParams(str)
    })
    .append("i")
        .attr("class", "fa fa-plus-circle")