From 9b123de8a34f561c29260b142133f72c8490a0ff Mon Sep 17 00:00:00 2001 From: mdtrooper <tres.14159@gmail.com> Date: Thu, 29 May 2014 15:50:21 +0000 Subject: [PATCH] 2014-05-29 Miguel de Dios <miguel.dedios@artica.es> * include/graphs/pandora.d3.js, include/graphs/functions_d3.php, operation/agentes/networkmap.dinamic.php: fixed the css for the m$-internet exploter 11. Please Bill Gates travels to Leon. git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@10040 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f --- pandora_console/ChangeLog | 6 + .../include/graphs/functions_d3.php | 2 +- pandora_console/include/graphs/pandora.d3.js | 413 +++++++++--------- .../operation/agentes/networkmap.dinamic.php | 2 +- 4 files changed, 221 insertions(+), 202 deletions(-) diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog index 244719a12e..0f960dd602 100644 --- a/pandora_console/ChangeLog +++ b/pandora_console/ChangeLog @@ -1,3 +1,9 @@ +2014-05-29 Miguel de Dios <miguel.dedios@artica.es> + + * include/graphs/pandora.d3.js, include/graphs/functions_d3.php, + operation/agentes/networkmap.dinamic.php: fixed the css for the + m$-internet exploter 11. Please Bill Gates travels to Leon. + 2014-05-29 Alejandro Gallardo <alejandro.gallardo@artica.es> * include/functions_config.php: Fixed the permission diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php index b43158981d..6288b1b987 100644 --- a/pandora_console/include/graphs/functions_d3.php +++ b/pandora_console/include/graphs/functions_d3.php @@ -60,7 +60,7 @@ function d3_tree_map_graph ($data, $width = 700, $height = 700, $return = false) if (is_array($data)) $data = json_encode($data); - $output = "<div id=\"tree_map\"></div>"; + $output = "<div id=\"tree_map\" style='overflow: hidden;'></div>"; $output .= include_javascript_d3(true); $output .= "<style type=\"text/css\"> .cell>rect { diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js index 8671a387dd..f70402f60d 100644 --- a/pandora_console/include/graphs/pandora.d3.js +++ b/pandora_console/include/graphs/pandora.d3.js @@ -337,139 +337,149 @@ function treeMap(recipient, data, width, height) { var nodes = treemap.nodes(root); var children = nodes.filter(function(d) { - return !d.children; - }); - var parents = nodes.filter(function(d) { - return d.children; - }); + return !d.children; + }); + var parents = nodes.filter(function(d) { + return d.children; + }); - // create parent cells - var parentCells = chart.selectAll("g.cell.parent") - .data(parents, function(d) { - return d.id; - }); - var parentEnterTransition = parentCells.enter() - .append("g") - .attr("class", "cell parent") - .on("click", function(d) { - zoom(node === d ? root : d); - }); - parentEnterTransition.append("rect") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", headerHeight) - .style("fill", headerColor); - parentEnterTransition.append('foreignObject') - .attr("class", "foreignObject") - .append("xhtml:div") - .attr("class", "labelbody") - .append("div") - .attr("class", "label"); - // update transition - var parentUpdateTransition = parentCells.transition().duration(transitionDuration); - parentUpdateTransition.select(".cell") - .attr("transform", function(d) { - return "translate(" + d.dx + "," + d.y + ")"; - }); - parentUpdateTransition.select("rect") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", headerHeight) - .style("fill", headerColor); - parentUpdateTransition.select(".foreignObject") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", headerHeight) - .select(".labelbody .label") - .text(function(d) { - return d.name; - }); - // remove transition - parentCells.exit() - .remove(); + // create parent cells + var parentCells = chart.selectAll("g.cell.parent") + .data(parents, function(d) { + return "p-" + d.name; + }); + var parentEnterTransition = parentCells.enter() + .append("g") + .attr("class", "cell parent") + .on("click", function(d) { + zoom(d); + }) + .append("svg") + .attr("class", "clip") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", headerHeight); + parentEnterTransition.append("rect") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", headerHeight) + .style("fill", headerColor); + parentEnterTransition.append('text') + .attr("class", "label") + .attr("fill", "white") + .attr("transform", "translate(3, 13)") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", headerHeight) + .text(function(d) { + return d.name; + }); + // update transition + var parentUpdateTransition = parentCells.transition().duration(transitionDuration); + parentUpdateTransition.select(".cell") + .attr("transform", function(d) { + return "translate(" + d.dx + "," + d.y + ")"; + }); + parentUpdateTransition.select("rect") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", headerHeight) + .style("fill", headerColor); + parentUpdateTransition.select(".label") + .attr("transform", "translate(3, 13)") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", headerHeight) + .text(function(d) { + return d.name; + }); + // remove transition + parentCells.exit() + .remove(); - // create children cells - var childrenCells = chart.selectAll("g.cell.child") - .data(children, function(d) { - return d.id; - }); - // enter transition - var childEnterTransition = childrenCells.enter() - .append("g") - .attr("class", "cell child") - .on("mouseover", over_user) - .on("mouseout", out_user) - .on("mousemove", move_tooltip) - .on("click", function(d) { - zoom(node === d.parent ? root : d.parent); - }); - childEnterTransition.append("rect") - .classed("background", true) - .style("fill", function(d) { - return color(d.name); - }); - childEnterTransition.append('foreignObject') - .attr("class", "foreignObject") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", function(d) { - return Math.max(0.01, d.dy); - }) - .append("xhtml:div") - .attr("class", "labelbody") - .append("div") - .attr("class", "label") - .text(function(d) { - return d.name; - }); + // create children cells + var childrenCells = chart.selectAll("g.cell.child") + .data(children, function(d) { + return "c-" + d.name; + }); + // enter transition + var childEnterTransition = childrenCells.enter() + .append("g") + .attr("class", "cell child") + .on("click", function(d) { + zoom(node === d.parent ? root : d.parent); + }) + .on("mouseover", over_user) + .on("mouseout", out_user) + .on("mousemove", move_tooltip) + .append("svg") + .attr("class", "clip"); + childEnterTransition.append("rect") + .classed("background", true) + .style("fill", function(d) { + return color(d.parent.name); + }); + childEnterTransition.append('text') + .attr("class", "label") + .attr('x', function(d) { + return d.dx / 2; + }) + .attr('y', function(d) { + return d.dy / 2; + }) + .attr("dy", ".35em") + .attr("text-anchor", "middle") + .style("display", "none") + .text(function(d) { + return d.name; + }); + // update transition + var childUpdateTransition = childrenCells.transition().duration(transitionDuration); + childUpdateTransition.select(".cell") + .attr("transform", function(d) { + return "translate(" + d.x + "," + d.y + ")"; + }); + childUpdateTransition.select("rect") + .attr("width", function(d) { + return Math.max(0.01, d.dx); + }) + .attr("height", function(d) { + return d.dy; + }) + .style("fill", function(d) { + return color(d.parent.name); + }); + childUpdateTransition.select(".label") + .attr('x', function(d) { + return d.dx / 2; + }) + .attr('y', function(d) { + return d.dy / 2; + }) + .attr("dy", ".35em") + .attr("text-anchor", "middle") + .style("display", "none") + .text(function(d) { + return d.name; + }); - if (isIE) { - childEnterTransition.selectAll(".foreignObject .labelbody .label") - .style("display", "none"); - } else { - childEnterTransition.selectAll(".foreignObject") - .style("display", "none"); - } + // exit transition + childrenCells.exit() + .remove(); - // update transition - var childUpdateTransition = childrenCells.transition().duration(transitionDuration); - childUpdateTransition.select(".cell") - .attr("transform", function(d) { - return "translate(" + d.x + "," + d.y + ")"; - }); - childUpdateTransition.select("rect") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", function(d) { - return d.dy; - }); - childUpdateTransition.select(".foreignObject") - .attr("width", function(d) { - return Math.max(0.01, d.dx); - }) - .attr("height", function(d) { - return Math.max(0.01, d.dy); - }) - .select(".labelbody .label") - .text(function(d) { - return d.name; - }); - // exit transition - childrenCells.exit() - .remove(); + d3.select("select").on("change", function() { + console.log("select zoom(node)"); + treemap.value(this.value == "size" ? size : count) + .nodes(root); + zoom(node); + }); - d3.select("select").on("change", function() { - treemap.value(this.value == "size" ? size : count) - .nodes(root); - zoom(node); - }); - - zoom(node); + zoom(node); function size(d) { return d.size; @@ -503,88 +513,91 @@ function treeMap(recipient, data, width, height) { var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114); return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff"; } +function zoom(d) { + treemap + .padding([headerHeight / (chartHeight / d.dy), 0, 0, 0]) + .nodes(d); - function zoom(d) { - treemap.padding([headerHeight/(chartHeight/d.dy), 0, 0, 0]).nodes(d); + // moving the next two lines above treemap layout messes up padding of zoom result + var kx = chartWidth / d.dx; + var ky = chartHeight / d.dy; + var level = d; - // moving the next two lines above treemap layout messes up padding of zoom result - var kx = chartWidth / d.dx; - var ky = chartHeight / d.dy; - var level = d; + xscale.domain([d.x, d.x + d.dx]); + yscale.domain([d.y, d.y + d.dy]); - xscale.domain([d.x, d.x + d.dx]); - yscale.domain([d.y, d.y + d.dy]); + if (node != level) { + chart.selectAll(".cell.child .label") + .style("display", "none"); + } - if (node != level) { - if (isIE) { - chart.selectAll(".cell.child .foreignObject .labelbody .label") - .style("display", "none"); - } else { - chart.selectAll(".cell.child .foreignObject") - .style("display", "none"); - } - } + var zoomTransition = chart.selectAll("g.cell").transition().duration(transitionDuration) + .attr("transform", function(d) { + return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; + }) + .each("start", function() { + d3.select(this).select("label") + .style("display", "none"); + }) + .each("end", function(d, i) { + if (!i && (level !== self.root)) { + chart.selectAll(".cell.child") + .filter(function(d) { + return d.parent === self.node; // only get the children for selected group + }) + .select(".label") + .style("display", "") + .style("fill", function(d) { + return idealTextColor(color(d.parent.name)); + }); + } + }); - var zoomTransition = chart.selectAll("g.cell").transition().duration(transitionDuration) - .attr("transform", function(d) { - return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; - }) - .each("end", function(d, i) { - if (!i && (level !== self.root)) { - chart.selectAll(".cell.child") - .filter(function(d) { - return d.parent === self.node; // only get the children for selected group - }) - .select(".foreignObject .labelbody .label") - .style("color", function(d) { - return idealTextColor(color(d.parent.name)); - }); + zoomTransition.select(".clip") + .attr("width", function(d) { + return Math.max(0.01, (kx * d.dx)); + }) + .attr("height", function(d) { + return d.children ? headerHeight : Math.max(0.01, (ky * d.dy)); + }); - if (isIE) { - chart.selectAll(".cell.child") - .filter(function(d) { - return d.parent === self.node; // only get the children for selected group - }) - .select(".foreignObject .labelbody .label") - .style("display", "") - } else { - chart.selectAll(".cell.child") - .filter(function(d) { - return d.parent === self.node; // only get the children for selected group - }) - .select(".foreignObject") - .style("display", "") - } - } - }); + zoomTransition.select(".label") + .attr("width", function(d) { + return Math.max(0.01, (kx * d.dx)); + }) + .attr("height", function(d) { + return d.children ? headerHeight : Math.max(0.01, (ky * d.dy)); + }) + .text(function(d) { + return d.name; + }); - zoomTransition.select(".foreignObject") - .attr("width", function(d) { - return Math.max(0.01, kx * d.dx); - }) - .attr("height", function(d) { - return d.children ? headerHeight: Math.max(0.01, ky * d.dy); - }) - .select(".labelbody .label") - .text(function(d) { - return d.name; - }); + zoomTransition.select(".child .label") + .attr("x", function(d) { + return kx * d.dx / 2; + }) + .attr("y", function(d) { + return ky * d.dy / 2; + }); - // update the width/height of the rects - zoomTransition.select("rect") - .attr("width", function(d) { - return Math.max(0.01, kx * d.dx); - }) - .attr("height", function(d) { - return d.children ? headerHeight : Math.max(0.01, ky * d.dy); - }); + zoomTransition.select("rect") + .attr("width", function(d) { + return Math.max(0.01, (kx * d.dx)); + }) + .attr("height", function(d) { + return d.children ? headerHeight : Math.max(0.01, (ky * d.dy)); + }) + .style("fill", function(d) { + return d.children ? headerColor : color(d.parent.name); + }); - node = d; + node = d; + + if (d3.event) { + d3.event.stopPropagation(); + } + } - if (d3.event) { - d3.event.preventDefault(); - } - } function position() { this.style("left", function(d) { return d.x + "px"; }) diff --git a/pandora_console/operation/agentes/networkmap.dinamic.php b/pandora_console/operation/agentes/networkmap.dinamic.php index d8b3ca1c49..6896434987 100755 --- a/pandora_console/operation/agentes/networkmap.dinamic.php +++ b/pandora_console/operation/agentes/networkmap.dinamic.php @@ -54,7 +54,7 @@ $zoom_default = file($config['homedir'] . '/images/zoom_default.svg'); //html_debug_print($graph); echo '<script type="text/javascript" src="' . $config['homeurl'] . 'include/javascript/d3.v3.js" charset="utf-8"></script>'; -echo '<div id="dinamic_networkmap"></div>'; +echo '<div id="dinamic_networkmap" style="overflow: hidden;"></div>'; ?> <style type="text/css"> #tooltip_networkmap {