那些遇到过的问题

d3.js圆形绘图在第一次尝试加载时无法正常工作

cur*_*guy 1 javascript svg d3.js

这是我的d3.js代码段:

<script>


var width = 300,
height = 300,
margin = 20;
var x_centre = width/2;
var y_centre = height/2;
var nuclear_radius = 15;

var vis = d3.select("#chart_container").append("svg:svg")
.attr("width", width)
.attr("height", height);

var radiuses = [1,2,3];

var multiplier = (d3.min([width, height]) - 2*margin - nuclear_radius) / (d3.max(radiuses) * 2);

var shells = vis.selectAll("circle.shell")
 .data(radiuses)
 .enter().append("circle")
 .attr("class", "shell")
 .attr("cx", x_centre)
 .attr("cy", y_centre)
 .attr("r", function(d, i) { 
     return (d * multiplier);
  });

var nucleus = vis.selectAll('circle.nucleus')
.data(['nucleus'])
.enter().append("circle")
.attr("class", "nucleus")
.attr("cx", x_centre)
.attr("cy", y_centre)
.attr("r", nuclear_radius);


function  showGraph(de)  {
var electrons = de


var radius_counts = {};
for (var i = 0; i < electrons.length; i++) { 
if (electrons[i].distance in radius_counts) { 
     radius_counts[electrons[i].distance] += 1;
} else { 
     radius_counts[electrons[i].distance] = 1;
} 
}

// Calculate the x- and y-coordinate values 
// for each electron.
var keep_count = {};
electrons.forEach(function(d) { 
var siblings = radius_counts[d.distance];
if (d.distance in keep_count) { 
  keep_count[d.distance] += 1;    
} else { 
    keep_count[d.distance] = 1;
}
var angle = (360/siblings) * keep_count[d.distance];
var hyp = d.distance * multiplier;  
if (angle <= 90) {
  var use_angle = (90 - angle) * (Math.PI/180);
  var opp = Math.sin(use_angle) * hyp;
  var adj = Math.cos(use_angle) * hyp;
    d.x = x_centre + adj;
    d.y = y_centre - opp;
}    else if (angle <= 180) { 
        var use_angle = (180 - angle) * (Math.PI/180);
      var opp = Math.sin(use_angle) * hyp;
      var adj = Math.cos(use_angle) * hyp;
        d.x = x_centre + opp;
        d.y = y_centre + adj;    
    } else if (angle <= 270) { 
    var use_angle = (270 - angle) * (Math.PI/180);
  var opp = Math.sin(use_angle) * hyp;
  var adj = Math.cos(use_angle) * hyp;
    d.x = x_centre - adj;
    d.y = y_centre + opp;    
} else { 
    var use_angle = (360 - angle) * (Math.PI/180);    
  var opp = Math.sin(use_angle) * hyp;
  var adj = Math.cos(use_angle) * hyp;
    d.x = x_centre - opp;
    d.y = y_centre - adj;
}

});

var electron_nodes = vis.selectAll('circle.electron')
.data(electrons)
.enter().append("circle")
.attr("class", "electron")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 7)
.on("mouseover", function(d) { 
   // how to drag the electron around the circle?
});
var svgData = vis.selectAll("circle.electron")
    .data(electrons);   
svgData.exit().remove();       
}

</script>
Run Code Online (Sandbox Code Playgroud)

现在我showGraph js function 每次都在点击事件上调用上面的count参数

function add_py()
{
 var count = $( "#count" ).val();
    $.ajax({
        type: "get",
        url: "abc.py",
        data: {'count': count},
        datatype:"script",
        async: false,
        success: function(response) {
        var data= JSON.parse(response);
        //alert(response)
        showGraph(data);
        }, // success closed
        error:function(xhr,err)
        {
            alert("Error connecting to server, please contact system administator.");
        }
    })//ajax closed
}
Run Code Online (Sandbox Code Playgroud)

现在,当我给出计数10时,SVG是这样的:

<svg width="300" height="300">
    <circle class="shell" cx="150" cy="150" r="40.833333333333336">
    <circle class="shell" cx="150" cy="150" r="81.66666666666667">
    <circle class="shell" cx="150" cy="150" r="122.5">
    <circle class="nucleus" cx="150" cy="150" r="15">
    <circle class="electron" cx="231.66666666666669" cy="150" r="7">
    <circle class="electron" cx="256.08811196359375" cy="211.25" r="7">
    <circle class="electron" cx="43.91188803640625" cy="211.25" r="7">
    <circle class="electron" cx="185.36270398786456" cy="170.41666666666669" r="7">
    <circle class="electron" cx="114.63729601213541" cy="170.41666666666666" r="7">
    <circle class="electron" cx="150" cy="231.66666666666669" r="7">
    <circle class="electron" cx="150" cy="27.5" r="7">
    <circle class="electron" cx="150" cy="109.16666666666666" r="7">
    <circle class="electron" cx="68.33333333333333" cy="150" r="7">
    <circle class="electron" cx="150" cy="68.33333333333333" r="7">
</svg>
Run Code Online (Sandbox Code Playgroud)

精确地工作10个圆圈class electron与不同的cx and cy情节.但是,如果我给第一个计数7或任何小于10然后10,那么svg就像:

<svg width="300" height="300">
    <circle class="shell" cx="150" cy="150" r="40.833333333333336">
    <circle class="shell" cx="150" cy="150" r="81.66666666666667">
    <circle class="shell" cx="150" cy="150" r="122.5">
    <circle class="nucleus" cx="150" cy="150" r="15">
    <circle class="electron" cx="150" cy="68.33333333333333" r="7">
    <circle class="electron" cx="150" cy="272.5" r="7">
    <circle class="electron" cx="150" cy="27.5" r="7">
    <circle class="electron" cx="150" cy="190.83333333333334" r="7">
    <circle class="electron" cx="150" cy="109.16666666666666" r="7">
    <circle class="electron" cx="150" cy="231.66666666666669" r="7">
    <circle class="electron" cx="150" cy="27.5" r="7">
    <circle class="electron" cx="150" cy="109.16666666666666" r="7">
    <circle class="electron" cx="68.33333333333333" cy="150" r="7">
    <circle class="electron" cx="150" cy="68.33333333333333" r="7">
</svg>
Run Code Online (Sandbox Code Playgroud)

地块整整10圈用class electron ,但cx并cy反复让他们重叠.但是如果我第一次给第10个计数它就没有重叠.如果我给出一个很大的计数,那么它的工作正常.但不是小而大.在此先感谢您的帮助.

Ame*_*aBR 7

问题是当你从7到10时,你永远不会更新现有的"电子".在你的代码中

var electron_nodes = vis.selectAll('circle.electron')
.data(electrons)
.enter().append("circle")
.attr("class", "electron")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 7)
.on("mouseover", function(d) { 
   // how to drag the electron around the circle?
});
Run Code Online (Sandbox Code Playgroud)

之后的所有内容enter()仅适用于添加的新元素.

这是一个常见的混乱; 我今天早些时候回答了另一个类似的问题,所以我将在这里尝试解释它(然后每个人都可以在将来链接到这个解释!).

链接方法是D3的重要组成部分,但它只能做很多事情.每个人都希望将所有内容链接在一起,但是您必须跟踪链条何时分离成一个enter()或多个exit()选项,然后返回主要选择进行更新.

一般更新例程通常有四个"链"(每个以a结尾;):

  • 一个 选择链,即选择元素,并更新数据,并保存在一个变量的选择,例如,你可以把它var elements

  • 一个输入链,从elements.enter().(您用来保存选择连锁或任何变量名),追加新的元素和设置,都将是恒定的任何属性或样式(即不会改变更新)

  • 一个退出链,首先elements.exit().,与过渡(如果使用)和remove()

  • 一个更新链,从您保存的选择变量开始,然后是所有方法来设置需要更新的属性或样式; 这也将首次在您刚刚创建的元素上设置这些属性.enter()

是的,你可以采取不同的方式,但前提是你清楚地了解发生了什么,以及为什么要改变这种模式.

这种方法还避免了代码中的重复,重新选择电子并重新应用数据以获得exit()选择.

因此,对于您的程序,4链更新方法的应用程序如下所示:

//chain 1: select
var electron_nodes = vis.selectAll('circle.electron')
      .data(electrons); 

//chain 2: enter
electron_nodes.enter().append("circle")
  .attr("class", "electron")
  .on("mouseover", function(d) { 
   // Although this function uses data at the time the event happens, 
   // the actual definition of the function never changes,
   // so you only need to attach it once when you create the node.
  })
  .attr("r", 7); 

//chain 3: exit
electron_nodes.exit().remove(); 

//chain 4: update
electron_nodes.attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; });
Run Code Online (Sandbox Code Playgroud)

对不起,有人花了很长时间才回答你的问题; 这是一个相当复杂的程序,可能会吓跑所有数学函数.将来,您不需要包含AJAX方法(假设您已经检查过它返回了正确的值),但是这将有助于包含AJAX请求返回的数据示例.当然,JSFiddle或Tributary上的一个工作示例甚至更好!

最好的, -
ABR

归档时间：

查看次数：

794 次

最近记录：

11 年，10 月 前
相关归档
使用纯JavaScript获取DOM元素值 71
如何获得两个日期对象之间的小时差异？ 70
使用OAuth和javascript的应用程序 45
在浏览器中使用html5和javascript显示交互式2D平面图 6
未捕获的TypeError:this.y.rangeBand在迁移到D3版本4后不是一个函数 5
Zoomable Treemap d3.v4 3
带有百分比和像素值的响应式 svg 3
SVG动画在Edge或IE中不起作用 2
d3.js - 为什么笔画模糊，除非偏移 0.5？ 2
d3.timer() 帧 - 减慢速度 1
难疑归档
JavaScript中使用"严格"做什么,背后的原因是什么？ 7339
如何删除子模块？ 3366
Python中追加与扩展列表方法的区别 3119
如何迭代字符串的单词？ 2895
如何用JavaScript更改元素的类？ 2650
在jQuery中检测移动设备的最佳方法是什么？ 1564
在Android上旋转活动重启 1341
如何完全卸载Node.js,并从头开始重新安装(Mac OS X) 1196
将标签重新定义为4个空格 1041
在jQuery中删除事件处理程序的最佳方法？ 1038