Question

Java脚本代码：

 var diagonal = d3.svg.diagonal()
    .projection(function(d) {
            if(d.name != "null"){  return [d.y, d.x]; }
            else{ return [d.x, d.y ]}
    });

＆＃13;

/* 
 * All D3 visuals run in a frame with the following elements/variables:
 * 
 * SVG element: 
 * - <svg xmlns="http://www.w3.org/2000/svg" class="chart" id="chart" >
 * 
 * pbi object:
 * - 'dsv'    : function that retrieves the data via the provided callback: pbi.dsv(callback)
                e.g. pbi.dsv(function(data) { //Process data function });
 * - 'height' : height of the sandbox frame
 * - 'width'  : width of the sandbox frame
 * - 'colors' : color array with 8 colors; changable via options
 * 
 * Code is based on: https://bl.ocks.org/mbostock/4339083
 */

// ADD: translate function for the data 
function toJSON(data) {
    var flare = { name: "Position", children: [] },
        levels = ["from_id","c1","c2","c3","c4","c5"];

    // For each data row, loop through the expected levels traversing the output tree
    data.forEach(function(d){
        // Keep this as a reference to the current level
        var depthCursor = flare.children;
        // Go down one level at a time
        levels.forEach(function( property, depth ){

            // Look to see if a branch has already been created
            var index;	
            depthCursor.forEach(function(child,i){
                if ( d[property] == child.name ) index = i;
            });
            // Add a branch if it isn't there
            if ( isNaN(index) ) {
                depthCursor.push({ name : d[property], children : []});
                index = depthCursor.length - 1;
            }
            // Now reference the new child array as we go deeper into the tree
            depthCursor = depthCursor[index].children;
            // This is a leaf, so add the last element to the specified branch
            if ( depth === levels.length - 1 ) depthCursor.push({ name : d.product, size : d.revenue });
        });
    });
    // End of conversion
    return flare;
}

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = pbi.width - margin.left - margin.right,   // ALTER: Changed fixed width with the 'pbi.width' variable
    height = pbi.height - margin.top - margin.bottom; // ALTER: Changed fixed height with the 'pbi.height' variable

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) {
      		if(d.name != "null"){  return [d.y, d.x]; }
      		else{ return [d.x, d.y ]}
    });

var svg =  d3.select("#chart")                           // ALTER: Select SVG object; no need to create it
    .attr("width", width + margin.left + margin.right)   // ALTER: Add complete width
    .attr("height", height + margin.top + margin.bottom) // ALTER: Add complete height
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// ALTER: Replaced the d3.json function with the pbi variant: pbi.dsv
pbi.dsv(function(data) {
        var flare = toJSON(data); // ALTER: add extra convertion step to parent/child JSON
        root = flare;
        root.x0 = height / 2;
        root.y0 = 0;

        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }
        root.children.forEach(collapse);
        update(root);
	});

d3.select(self.frameElement).style("height", height + margin.top + margin.bottom);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {  return "translate(" + source.y0 + "," + source.x0 + ")";  })
  	  .attr("r", function(d) { return d == null ? 0 : 3; })
      .on("click", click)
  	  .on("mouseover", function(ds,index) {
       	var g = d3.select(this); // The node
        d3.select(this).attr("r", 10)
         // The class is used to remove the additional text later
           var info = g.append('text')
              .classed('info', true)
              .attr('x', -20)
              .attr('y', -15)
              .style("fill", function(d) { 
                   if( data[index].from_department == "engineering"){
                       return "green";
                    }
                   else if( data[index].from_department == "procurement"){
                     return "orange";
                   }
                   else if( data[index].from_department == "construction"){
                     return "red";
                   }
                   else { return "black";}
             })
             .text(function(d,i) { 
              	   return data[index].from_department + " to " + data[index].to_department;
             }); 
      })
      .on("mouseout", function() {
          // Remove the info text on mouse out.
          d3.select(this).select('text.info').remove();
          d3.select(this).attr("r", 6).style("fill", "black");
      });

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? pbi.colors[0] : pbi.colors[1]; })
  	  .style("display", function(d){ return d.name == "null" ? "none" : "block"; })
  	  
  
  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("display", function(d){ return d.name == "null" ? "none" : "block"; })
      .style("fill-opacity", 1e-6);
  
  
  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  
  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children  ? pbi.colors[0] : pbi.colors[1]; })
  
		
  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

＆＃13;

请提供反对相同值的对角线坐标。如果名称为空值，我不想生成对角线投影，但它不会工作，请让我知道如何做到这一点。

我试过这个d3js removing null values。我在power bi dekstop中使用d3.js工具

如果出现空值，如何删除对角线投影d3.js

0 个答案: