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

Question

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

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

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: '/image/5mrSI.jpg?s=32&g=1'
}, {
  text: "Orange",
  icon: '/image/5mrSI.jpg?s=32&g=1',
}, {
  text: "Banana",
  icon: '/image/5mrSI.jpg?s=32&g=1'
}, {
  text: "Grape",
  icon: '/image/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; }) 再次到达 li 元素。最后，可以将 span 元素附加到数据中的文本，并将其文本集附加到该元素。这种方法为您的上下文菜单增加了更大的灵 active ，因为您可以指定 HTML 的结构，而不是依赖于列表元素元素符号的样式。

Complete fiddle here.