相关疑难解决方法(0)

d3从酒吧过渡到馅饼和背部

现场演示

所以我认为应该允许所有单轴数据以所有基本方式显示; 至少从馅饼到酒吧.理想情况下,这将是一个动画过渡,但那就是难度.

获得饼图很容易,就像获得条形图一样.这是我到目前为止:

# fields
width   = 750
height  = width/2
margin  = 20
radius  = (height-(margin*2))/2

# helpers
pie     = d3.layout.pie().value (d) -> d 
arc     = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius/4)
x       = d3.scale.linear().domain([0, 100]).range [0, width]

$http.get('/Classification_Top_10_by_Count.json').success (data) ->

    percents = (parseFloat item.Percent for item in data).sort d3.ascending

    svg      = d3.select('#svgStage').append('svg')         
        .attr('width', width+(margin*2))
        .attr('height', height+(margin*2))

    svg.data([percents])

    g = svg.append('g')
        .attr('transform', "translate(#{radius},#{radius})")

    paths   = g.selectAll 'path'

    paths.data(pie).enter().append('path')
        .attr('d', arc)

    toBars = ->
        g.selectAll('path').transition().duration(2000) 
            .attr 'd', (d, index) ->
                # this …
Run Code Online (Sandbox Code Playgroud)

animation coffeescript d3.js

8
推荐指数
2
解决办法
2247
查看次数

标签 统计

animation ×1

coffeescript ×1

d3.js ×1