如何在D3 Js上下文菜单项旁边显示图像。

Question

我有一个带有圆圈的D3 SVG内容，在右边单击它打开一个上下文菜单，显示数组中的项目列表。我想在上下文菜单中的每个元素旁边显示特定的图像。

上下文菜单的代码在这里ContextMenu实例

​

var fruits = ["Apple", "Orange", "Banana", "Grape"];

var svgContainer = d3.select("body")
	.append("svg")
    .attr("width", 200)
    .attr("height", 200);

var circle = svgContainer
	.append("circle")
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("r", 20)
    .on('contextmenu', function(d,i) {
          // create the div element that will hold the context menu
          d3.selectAll('.context-menu').data([1])
            .enter()
            .append('div')
            .attr('class', 'context-menu');
          // close menu
          d3.select('body').on('click.context-menu', function() {
            d3.select('.context-menu').style('display', 'none');
          });
          // this gets executed when a contextmenu event occurs
          d3.selectAll('.context-menu')
            .html('')
            .append('ul')
            .selectAll('li')
              .data(fruits).enter()
              .append('li')
              
          .on('click' , function(d) { console.log(d); return d; })
              

              .text(function(d) { return d; });
          d3.select('.context-menu').style('display', 'none');
          // show the context menu
          d3.select('.context-menu')
            .style('left', (d3.event.pageX - 2) + 'px')
            .style('top', (d3.event.pageY - 2) + 'px')
            .style('display', 'block');
          d3.event.preventDefault();
      });

.context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;
  z-index:1200;
}

.context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.context-menu ul li {
  padding: 4px 16px;
}

.context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>

​

可以在菜单项旁边显示图片吗？如果是的话，我该怎么展示。

Answer 1

如果我们首先更改您的数据结构以将文本与图标关联起来，那么我们有：

var data = [{
  text: 'Apple',
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
  text: "Orange",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1',
}, {
  text: "Banana",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
  text: "Grape",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}];

现在，我们可以更改创建上下文菜单的方式：

d3.selectAll('.context-menu')
    .html('')
    .append('ul')
    .selectAll('li')
    .data(data)
    .enter()
    .append('li')
    .append(function(d) {
        // Create the image element.
        const icon = document.createElement('img');
        // Change its source to the icon.
        icon.src = d.icon;
        // Return the image element.
        return icon;
    })
    // Go back up a node, so that we can append the span.
    .select(function () {
       return this.parentNode;
    })
    .append('span')
    // Change the text of the span element to the current 
    // data's text property.
    .text(function (d) {
        return d.text;
    });

上述片段的下半部分是完成工作的地方。在通过.append('li')创建列表元素之后，您需要追加一个表示与当前上下文菜单项关联的图标的图像元素。在追加图像元素之后，应该添加文本节点。由于图像元素刚刚被追加，因此当前节点引用此图像节点。我们希望向上移动一个节点，因此我们再次通过.select(function () { return this.parentNode; })到达.select(function () { return this.parentNode; })元素。最后，可以将span元素与其文本集附加到数据中的文本中。这种方法为上下文菜单增加了更大的灵活性，因为您可以指定HTML的结构，而不是依赖于列表元素符号的样式设置。

这里完全是小提琴。

Answer 2

实现这一目标的最简单方法可能是使用li项的li属性来对每个项前面的项目进行样式化。在追加列表项时，可以将此属性设置为您喜欢使用的任何图像。为了简单起见，我的代码引用了一堆示例图像：

.selectAll('li')
  .data(fruits).enter()
  .append('li')
    .style('list-style-image', function(d,i) {
      return 'url("http://loremflickr.com/48/48?i=' + i + '")';
    })

我稍微重新安排了您的代码片段，以使生活变得更简单一些，而且它可能需要进一步改进，但是下面的代码应该足够让您开始工作了：

​

var fruits = ["Apple", "Orange", "Banana", "Grape"];

var svgContainer = d3.select("body")
	.append("svg")
    .attr("width", 200)
    .attr("height", 200);

var ctxMenu = d3.select("body")
  .append('div')
    .style('display', 'none')
    .attr('class', 'context-menu');

d3.select('body').on('click.context-menu', function() {
  ctxMenu.style('display', 'none');
});

var circle = svgContainer
	.append("circle")
    .attr("cx", 60)
    .attr("cy", 60)
    .attr("r", 20)
    .on('contextmenu', function(d,i) {
          ctxMenu.selectAll("ul").remove();
          
          // create the div element that will hold the context menu
          // this gets executed when a contextmenu event occurs
          ctxMenu
  					.append('ul')
            .selectAll('li')
            .data(fruits).enter()
            .append('li')
              .style('list-style-image', function(d,i) {
                return 'url("http://loremflickr.com/48/48?i=' + i + '")';
              })
              .on('click' , function(d) { console.log(d); return d; })
              .text(function(d) { return d; });

         // show the context menu
          ctxMenu
            .style('left', (d3.event.pageX - 2) + 'px')
            .style('top', (d3.event.pageY - 2) + 'px')
            .style('display', 'block');
          d3.event.preventDefault();
      });

.context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;
  z-index:1200;
}

.context-menu ul {
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.context-menu ul li {
  padding: 4px 12px;
  margin-left: 65px;
}

.context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>

​