Как разобрать массив объектов, используя метод данных d3 js и отобразить его во всплывающей подсказке? - PullRequest
Новая
       20

Как разобрать массив объектов, используя метод данных d3 js и отобразить его во всплывающей подсказке?

1 голос
/ 27 февраля 2020

Я пытаюсь реализовать всплывающую подсказку при наведении на определенный узел в силовом ориентированном графе, используя d3 js.

Текущее поведение: подсказка загружается, но текст отображается неправильно. вместо правильного текстового сообщения отображается сообщение [объектный объект].

Ожидаемый результат: подсказка должна отображать текст в следующем формате: 

Item Name: 'Item1',
Item Id: 'Item1',
Supplier: 'Supplier1'

Как этого добиться?

Рабочая скрипка: Наконечник инструмента 

function showToolTip(selectedNode) {
  var itemDetails = [
            {'Item': selectedNode.name},
            {'Item Id': selectedNode.id},
            {'status': 'Normal'},
            {'Supplier': 'Supplier1'},
        ];
        tooltip.transition().duration(200).style('visibility', 'visible')
            .style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
        tooltip.selectAll('div').data(itemDetails).enter().append('div').text(function (d, i) { return d; });
  }

function hideTooltip() {
 tooltip.selectAll('*').remove();
        tooltip.transition().duration(500).style('visibility', 'hidden');
}

Ответы [ 3 ]

1 голос
/ 27 февраля 2020

Элемент каждого <div> является объектом, и вы пытаетесь передать весь объект методу text(), отсюда и результат, который вы видите.

Лучшая идея - иметь дело с объектом внутри метода text(), указав, что именно вы хотите показать (ключи и значения) и как. Между тем очень простое и наивное решение таково: 

.text(function (d, i) { 
    return Object.entries(d)[0].join(": ");
});

Вот раздвоенный JSFiddle: https://jsfiddle.net/ou85b3n1/

0 голосов
/ 27 февраля 2020 
  function showToolTip(selectedNode) {
        tooltip.transition().duration(200).style('visibility', 'visible')
            .style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
        tooltip.append('div').text(`Item: ${selectedNode.name}`);
        tooltip.append('div').text(`Item Id: ${selectedNode.id}`);
        tooltip.append('div').text(`Status: Normal`);
        tooltip.append('div').text(`Supplier: Supplier1`);
  }

https://jsfiddle.net/nh4fdw03/1/

0 голосов
/ 27 февраля 2020

Вы можете сделать: 

return `${Object.keys(d)[0]}: ${d[Object.keys(d)[0]]}`

Вместо: 

return d

В вашей showToolTip функции

Вы получите эту ошибку (что является ожидаемым поведением) потому что вы возвращаете полный объект вместо строки.

Fiddle

...