d3圆弧图 - 添加顶半圆 [英] d3 arc diagram - add top semi circles

问题描述

http://jsfiddle.net/pRkpL/ 和 http://fiddle.jshell.net/pRkpL/show/

我我正在制作一个基于这个演示的弧图： http://bl.ocks.org/sjengle/ 5431779 。我需要一段时间才能进入这个阶段，图表现在可以以我需要的所有方式调整数据。

但是，我有两个问题：

1）我需要创建2个圆弧图 - 一个在黑色矩形上方（在代码中命名为桶），一个在下面。作为一个临时修复，我已经使用css3 3D变换在x轴上翻转一个弧图，但浏览器支持是最好的flaky。它工作，只有在Chrome，有时你必须刷新，打开开发工具，或调整大小的小提琴框架，它踢。我想用d3正确地做。

我认为创建红弧（下半部分）的代码是：

  var radians = d3.scale.linear（）
 .range（[Math.PI / 2，3 * Math.PI / 2]）; 
  

我发现如果我删除最后的 / 2 它显示一个完整的圆，但是我不能让它只显示我的 drawTop 函数的上半部分。

2）我目前为2个圆弧图重复了两个大函数， drawTop 和 drawBtm 。两者之间的唯一区别是数据数组（ good_jumps 和 bad_jumps ），容器ID和弧度逻辑以上，如果可以解决。有没有办法我可以把这些组合成一个，所以我不重复的逻辑？

我是相当新的JS，所以请让我知道如果有任何

解决方案

如果你想改变json的外观，使圆弧出现在框的顶部，您只需要更改弧度缩放的输出范围以覆盖上半部分：

  radians.range（[ -  Math.PI / 2，Math.PI / 2]）;关于第二个问题，这样做的一种方法是添加另一个属性到您的数据，允许添加到您的数据。区分两种类型的弧，例如 .good 。一旦你这样做，你可以打开该属性的值来决定添加的路径的类和范围 radians ，这是唯一的区别arcs。
 
 
 
完成jsfiddle 这里。 / p> 
http://jsfiddle.net/pRkpL/ and http://fiddle.jshell.net/pRkpL/show/

I am making an arc diagram which is based heavily on this demo: http://bl.ocks.org/sjengle/5431779.  It's taken me a while to get to this stage, and the graph now adapts to the data in all the ways I need it to.

However, I have 2 questions:

1) I need to create 2 arc diagrams - one above the black rectangles (named buckets in the code) and one below.  As a temporary fix, I have used css3 3D transforms to flip one of the arc diagrams over on the x-axis, but the browser support is flaky at best.  It does work, only in Chrome, and sometimes you have to refresh, open dev tools, or resize the fiddle frame for it to kick in.  I'd like to do it properly with d3.

I think the code which creates the red arcs (the lower half of a circle) is this:
var radians = d3.scale.linear()
                .range([Math.PI / 2, 3 * Math.PI / 2]);
I found if I remove the last / 2 it displays a full circle, however I can't get it to display only the top half in my drawTop function.

2) I currently duplicate 2 large functions for the 2 arc diagrams, drawTop and drawBtm.  The only differences between the two are the data arrays (good_jumps and bad_jumps), the container id, and the radians logic above, if that can get solved.  Is there a way I can combine these into one so I'm not duplicating the logic?

I'm fairly new to JS so please let me know if there are any obvious blunders in the code :)  Also, there's no possibility to alter the json as it comes from an external api.
解决方案
To make the arcs appear on top of the boxes, you just need to change the output range of your radians scale to cover the top half:
radians.range([-Math.PI / 2, Math.PI / 2]);
Regarding the second question, one way of doing this is to add another attribute to your data that allows to distinguish between the two types of arcs, e.g. .good. Once you've done that, you can switch on the value of that attribute to decide the class of the added path and the range of radians, which are the only differences between the arcs.

Complete jsfiddle here.

                        
这篇关于d3圆弧图 - 添加顶半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！