Fatal编程技术网
  • javascript/
  • Javascript 带滑块的D3图形，更改节点颜色并添加标签

Javascript 带滑块的D3图形，更改节点颜色并添加标签

javascript node.js d3.js

Javascript 带滑块的D3图形，更改节点颜色并添加标签,javascript,node.js,d3.js,Javascript,Node.js,D3.js,我有一个D3脚本，它创建了一个边上有滑块的图形。此滑块将仅显示具有滑块指示的度数的链接节点。所有其他节点都将断开连接并转到一侧 当前，此代码以相同的颜色显示它们，并且没有节点标签。我希望能够使外部节点具有不同的颜色（即灰色），以便更好地区分断开连接的节点 我还想包括这些节点的标签。我希望标签位于节点内部 欢迎在这两个问题上提供任何帮助 下面是我的脚本 <!DOCTYPE html> <meta charset="utf-8"> <title>Slider Gr

我有一个D3脚本，它创建了一个边上有滑块的图形。此滑块将仅显示具有滑块指示的度数的链接节点。所有其他节点都将断开连接并转到一侧

当前，此代码以相同的颜色显示它们，并且没有节点标签。我希望能够使外部节点具有不同的颜色（即灰色），以便更好地区分断开连接的节点

我还想包括这些节点的标签。我希望标签位于节点内部

欢迎在这两个问题上提供任何帮助

下面是我的脚本

<!DOCTYPE html>
<meta charset="utf-8">
<title>Slider Graph</title>
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

.axis {
  opacity: 0.5;
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 4px;
  stroke-linecap: round;
}

.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 3px;
  stroke-linecap: round;
}

.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  cursor: grab;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var x = d3.scale.linear()
    .domain([0, 20])
    .range([250, 80])
    .clamp(true);

var brush = d3.svg.brush()
    .y(x)
    .extent([0, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var links_g = svg.append("g");

var nodes_g = svg.append("g");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + (width - 20)  + ",0)")
    .call(d3.svg.axis()
      .scale(x)
      .orient("left")
      .tickFormat(function(d) { return d; })
      .tickSize(0)
      .tickPadding(12))
  .select(".domain")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "halo");

var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);

slider.selectAll(".extent,.resize")
    .remove();

var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(" + (width - 20) + ",0)")
    .attr("r", 5);

svg.append("text")
    .attr("x", width - 15)
    .attr("y", 60)
    .attr("text-anchor", "end")
    .attr("font-size", "12px")
    .style("opacity", 0.5)
    .text("degree threshold")

d3.json("test4.json", function(error, graph) {
  if (error) throw error;

  graph.links.forEach(function(d,i){ d.i = i; });
  graph.nodes.forEach(function(d,i){ d.i = i; });

  function brushed() {
    var value = brush.extent()[0];

    if (d3.event.sourceEvent) {
      value = x.invert(d3.mouse(this)[1]);
      brush.extent([value, value]);
    }
    handle.attr("cy", x(value));
    var threshold = value;
    console.log(graph.nodes);
    var thresholded_nodes = graph.nodes.filter(function(d){ return (d.degree > threshold);});
    var thresholded_links = graph.links.filter(function(d){ return (d.min_degree > threshold);});
    console.log(thresholded_nodes);

    force
        .links(thresholded_links);

    var link = links_g.selectAll(".link")
        .data(thresholded_links, function(d){ return d.i; });

    link.enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) { return Math.sqrt(d.value); });

    link.exit().remove();


    force.on("tick", function() {
      link.attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    });

    force.start();

  }

  force
      .nodes(graph.nodes);

  var node = nodes_g.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      // .style("fill", function(d) { return color(1); })
      .style("fill", function(d) { return color(1); })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  brush.on("brush", brushed);

  slider
    .call(brush.extent([5, 5]))
    .call(brush.event);

});

</script>


滑块图
.节点{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}
.安讯士{
不透明度：0.5；
字体：10px无衬线；
-webkit用户选择：无；
-moz用户选择：无；
用户选择：无；
}
.axis.domain{
填充：无；
行程：#000；
笔划不透明度：.3；
笔画宽度：4px；
笔划线头：圆形；
}
.轴心光环{
填充：无；
行程：#ddd；
笔画宽度：3px；
笔划线头：圆形；
}
.滑块.手柄{
填充：#fff；
行程：#000；
笔画不透明度：.5；
笔划宽度：1.25px；
光标：抓取；
}
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var x=d3.scale.linear（）
.domain（[0,20]）
.范围（[250,80]）
.夹具（正确）；
var brush=d3.svg.brush（）
.y（x）
.范围（[0,0]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var links_g=svg.append（“g”）；
var nodes_g=svg.append（“g”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“平移”（+（宽度-20）+”，0））
.call（d3.svg.axis（）
.比例（x）
.东方（“左”）
.tickFormat（函数（d）{return d；}）
.1.1尺寸（0）
.1（12））
.select（“.domain”）
.select（函数（）{返回this.parentNode.appendChild（this.cloneNode（true））；}）
.attr（“类别”、“光环”）；
var slider=svg.append（“g”）
.attr（“类”、“滑块”）
.打电话（刷子）；
滑块。选择全部（“.extent，.resize”）
.remove（）；
变量句柄=slider.append（“圆”）
.attr（“类”、“句柄”）
.attr（“转换”、“平移”（+（宽度-20）+”，0））
.attr（“r”，5）；
svg.append（“文本”）
.attr（“x”，宽度-15）
.attr（“y”，60岁）
.attr（“文本锚定”、“结束”）
.attr（“字体大小”，“12px”）
.样式（“不透明度”，0.5）
.text（“学位门槛”）
d3.json（“test4.json”），函数（错误，图形）{
如果（错误）抛出错误；
forEach（函数（d，i）{d.i=i；}）；
forEach（函数（d，i）{d.i=i；}）；
函数brushed（）{
var值=brush.extent（）[0]；
if（d3.event.sourceEvent）{
值=x.invert（d3.鼠标（this）[1]）；
范围（[值，值]）；
}
handle.attr（“cy”，x（value））；
风险值阈值=价值；
console.log（graph.nodes）；
var threshold_nodes=graph.nodes.filter（函数（d）{return（d.degree>threshold）；}）；
var threshold_links=graph.links.filter（函数（d）{return（d.min_degree>threshold）；}）；
log（阈值化的_节点）；
力
.链接（阈值链接）；
var link=links\u g.selectAll（“.link”）
.数据（阈值_链接，函数（d）{返回d.i；}）；
link.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
link.exit（）.remove（）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
force.start（）；
}
力
.节点（图.节点）；
变量节点=节点\u g.选择全部（“.node”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
//.style（“填充”，函数（d）{返回颜色（1）；}）
.style（“填充”，函数（d）{返回颜色（1）；}）
.呼叫（强制拖动）；
node.append（“标题”）
.text（函数（d）{返回d.name；}）；
刷上（“刷”，刷）；
滑块
.call（刷子.extent（[5,5]））
.呼叫（刷子、事件）；
});