Как обновить внешнюю гистограмму, щелкнув по узлу в сети с принудительной ориентацией - PullRequest
Новая
       5

Как обновить внешнюю гистограмму, щелкнув по узлу в сети с принудительной ориентацией

1 голос
/ 25 апреля 2011

Я пытаюсь обновить содержимое гистограммы, нажимая на узел в сети с принудительной ориентацией. В настоящее время я пытаюсь использовать событие «mousemove» на главной панели с событием «point», которое обновляет переменную activeNode, которая затем сообщает, к какой строке я надеюсь получить доступ. У меня возникли проблемы с тем фактом, что мое событие point из главной панели не обновляет activeNode и для него всегда устанавливается значение по умолчанию. Пробовал везде искать исправления с этим, но я думаю, что мне не хватает более фундаментальной концепции.

Вот код ... 

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    colors = pv.Colors.category19(),
    activeNode = 0;

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .fillStyle("white")
    .event("mousemove", pv.Behavior.point(Infinity));   

var force = vis.add(pv.Layout.Force)
    .width(w-200)
    .nodes(miserables.nodes)
    .links(miserables.links);

force.link.add(pv.Line);

force.node.add(pv.Dot)
    .def("o",-1)
    .size(function(d) (d.linkDegree + 10) * Math.pow(this.scale, -1.5))
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker())
    .lineWidth(1)
    .title(function(d) this.index)
    .event("mousedown", pv.Behavior.drag())
    .event("drag", force)
    .event("point", function() {activeNode = this.index; return vis;});

vis.add(pv.Label).top(20).left(w/2).text("activeNode = " + activeNode);

vis.add(pv.Bar)
    .data(topw[activeNode].splice(0))
    .top(function(d) this.index * 30)
    .left(w-80)
    .width(15)
    .height(20)
    .anchor("left").add(pv.Label)
        .textAlign("right")     
        .text(function(d) d[0]); 

vis.render();

1 Ответ

2 голосов
/ 11 мая 2011

Здесь есть несколько проблем, но основная из них концептуальная: когда вы объявляете свойства для меток в визуализации, вы можете использовать значение, например: 

.width(10)

илитакая функция, как: 

.width(function() { return 10; })

Разница в том, что вторая версия будет переоцениваться каждый раз, когда вы render() vis (или соответствующая часть vis).Например, если у вас есть: 

vis.add(pv.Label).top(20).left(w/2).text("activeNode = " + activeNode);

, это будет оцениваться только при первом отображении vis.Вместо этого вам нужна функция: 

// assign the label to a variable, so we can refer to it later
// this is easiest if we define the label and bar first
var nodeLabel = vis.add(pv.Label)
    .top(20)
    .left(w/2)
    .textAlign("right") // easier for my bar layout
    // note that this has to be a function, so that it will be 
    // re-evaluated on re-render
    .text(function() {
        return "activeNode = " + (activeNode ? activeNode.nodeName : 'None')
    });

Таким образом, ваш исправленный код может выглядеть следующим образом (я немного изменил гистограмму, поскольку у меня нет доступа к topw данным, на которые вы ссылаетесь):

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    colors = pv.Colors.category19(),
    activeNode = null;

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .fillStyle("white")
    .event("mousemove", pv.Behavior.point(Infinity));   

// assign the label to a variable, so we can refer to it later
// this is easiest if we define the label and bar first
var nodeLabel = vis.add(pv.Label)
    .top(20)
    .left(w/2)
    .textAlign("right") // easier for my bar layout
    // note that this has to be a function, so that it will be 
    // re-evaluated on re-render
    .text(function() {
        return "activeNode = " + (activeNode ? activeNode.nodeName : 'None')
    });

// again, assign the bar to a variable
// I think I'm missing some data for your example, so
// I made a single bar to show node degree
// (only one data point, so no .data() needed)
var nodeBar = vis.add(pv.Bar)
    .top(0)
    .left(w/2)
    .height(20)
    .width(function() {
        // make a scale based on all nodes
        var scale = pv.Scale.linear(
            // get the max link degree to be the upper limit of the scale
            0, pv.max(miserables.nodes, function(d) { return d.linkDegree; })
        ).range(0, 200);
        // return a value based on the active node
        return activeNode ? scale(activeNode.linkDegree) : 0;
    });

var force = vis.add(pv.Layout.Force)
    .width(w-200)
    .nodes(miserables.nodes)
    .links(miserables.links);

force.link.add(pv.Line);

force.node.add(pv.Dot)
    .def("o",-1)
    .size(function(d) (d.linkDegree + 10) * Math.pow(this.scale, -1.5))
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker())
    .lineWidth(1)
    .title(function(d) this.index)
    .event("mousedown", pv.Behavior.drag())
    .event("drag", force)
    .event("point", function(d) {
        // set the global variable to point to the current node
        activeNode = d;
        // re-render the label
        nodeLabel.render();
        // re-render the bar
        nodeBar.render();
    });

vis.render();
...