javascript - Draw layered arc in D3 -


I want to create a chart with d3.js, which looks like this arch:

Chart should have several layers in it, such as:

How to create a chart, which has "difference", like arc, but with many layers, such as the last bela?

Code for the last chart: 

  var dataset = {apple: [53245, 28479, 19697, 24037, 40245], oranges: [53245, 28479, 19697, 24037, 40245], Lemon: [53245, 28479, 19697, 24037, 40245], Pear: [53245, 28479, 19697, 24037, 40245],} ; Var width = 600, height = 400, cwdith = 45; Var color = d3.scale.category20 (); Var Pi = D3 Layout. () .sort (faucet); Var arc = d3.svg.arc (); ("Width", width) .attr ("height", height) .attr ("stroke-width", "2"). Etter ("stroke", "#fff"). Append ("g") .attr ("conversion", "translation (" + width / 2 + "," + height / 2 + ")"); Var gs = svg.selectAll ("g"). Data (d3.values ​​(dataset)) Enter () Attachments ("g"); GsselectAll ("path") data (function (d) {return pi (d);}) .inter () .andend ("path") .attr ("fill", function (d, i) {return color (i );}) .attr ("d", function (d, i, j) {return arc.inner radius (cwidth * j). Oterradius (cwidth * (j + 1)) (d);});

Any help that I can get anywhere near my goal is appreciated! :)

Pie layout allows you to set start and end angles so that you can do the following To create a gap in the chart: 

  var pie = d3.layout.pie () .sort (null) .startAngle (-40 * (Math.PI / 180)) .endAngle (270 * (Math.PI / 180));

It looks like:

You can only set the internal radius property on the arc code generator, so that you can add the hollow center You can do this by adding an inner_radius to offset all individual arcs in this way: 

  var inner_radius = 20; GsselectAll ("path") data (function (d) {return pi (d);}) .inter () .andend ("path") .attr ("fill", function (d, i) {return color (i );}) .attr ("d", function (d, i, j) {return arc. Witterredius (cwidth * j + inner_radius). Oterradius (cwidth * (j + 1) + inner_radius) (d);}) ;

Once again it is in verb:

In addition, if you want internal radius cwidth you can multiply by bus There are no (j1) and (j + 2) and then you will not need additional inner_radius .


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more