TypeScript d3.json函數代碼示例

$(document).ready(function() {
  let logicalWidth: number = 500;
  let logicalHeight: number = 100;
  let aspect = logicalWidth / logicalHeight;

  let resize = function(chartElt: SvgSelection<SVGSVGElement>): void {
    console.log(chartElt.node().getBoundingClientRect());
    let targetWidth: number = chartElt.node().getBoundingClientRect().width;
    chartElt.attr("width", targetWidth);
    chartElt.attr("height", targetWidth / aspect);
  };

  let chartElt =
    d3.select('body').append<SVGSVGElement>('svg');
  chartElt.attr('width', '100%')
       .attr('viewBox', '0 0 ' + logicalWidth + ' ' + logicalHeight)
       .attr('preserveAspectRatio', 'xMidYMid meet');
  resize(chartElt);

  /*
  d3.select(window)
    .on("resize", function() {
      resize(chartElt);
    });
  */

  let chart = new TemperatureChart(
    chartElt,
    {
      width: logicalWidth,
      height: logicalHeight,
      axisSize: 20,
      margin: 2,
    });

  d3.json('/data', function(data: DataPoint[]) {
    console.log(JSON.stringify(data[0]));
    chart.render(data);
  });
});

 public fetchAndDrawMapFromJsonSource(url: string, callback) {
     d3.json(url, (error: any, world: any) => callback(error, world));
 }

    ngOnInit(){     
       
        var el = this.elementRef.nativeElement;
        var attrName = el.children && el.children[0] && el.children[0].attributes && el.children[0].attributes[0] && el.children[0].attributes[0].name;
       
        var componentContainer = d3.select(this.elementRef.nativeElement);
        var d3Container = componentContainer.select("#display");
        
        var margin = {top: 30, right: 120, bottom: 0, left: 120},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var x = d3.scale.linear()
            .range([0, width]);

        var barHeight = 20;

        var color = d3.scale.ordinal()
            .range(["steelblue", "#ccc"]);

        var duration = 750,
            delay = 25;
            
        var partition = d3.layout.partition()
            .value(function(d) { return d.size; });

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("top");

        var svg = d3Container.append("svg")
            .attr(attrName, "")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr(attrName, "")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("rect")
            .attr(attrName, "")
            .attr("class", "background")
            .attr("width", width)
            .attr("height", height)
            .on("click", up);

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "x axis");

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "y axis")
        .append("line")
            .attr(attrName, "")
            .attr("y1", "100%");

        d3.json("app/components/bar-charts-hierarchical-bar-chart/readme.json", function(error, root) {
            if (error) throw error;

            partition.nodes(root);  
            x.domain([0, root.value]).nice();
            down(root, 0);
        });
        
        

        function down(d, i) {
            if (!d.children || window.__transition__) return;
            var end = duration + d.children.length * delay;

            // Mark any currently-displayed bars as exiting.
            var exit = svg.selectAll(".enter")
                .attr("class", "exit");

            // Entering nodes immediately obscure the clicked-on bar, so hide it.
            exit.selectAll("rect").filter(function(p) { return p === d; })
                .style("fill-opacity", 1e-6);

            // Enter the new bars for the clicked-on data.
            // Per above, entering bars are immediately visible.
            var enter = bar(d)
                .attr("transform", stack(i))
                .style("opacity", 1);

            // Have the text fade-in, even though the bars are visible.
            // Color the bars as parents; they will fade to children if appropriate.
            enter.select("text").style("fill-opacity", 1e-6);
            enter.select("rect").style("fill", color(true));

            // Update the x-scale domain.
            x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();

            // Update the x-axis.
            svg.selectAll(".x.axis").transition()
                .duration(duration)
                .call(xAxis);

            // Transition entering bars to their new position.
            var enterTransition = enter.transition()
                .duration(duration)
//.........這裏部分代碼省略.........

d3.json("data/yelp_test_set_business.json", (yelp_data:IYelpData[]) => {

    /********************************************************
     *                           *
     *   Step1: Create the dc.js chart objects & ling to div *
     *                           *
     ********************************************************/
    var bubbleChart: dc.BubbleChart = dc.bubbleChart("#dc-bubble-graph");
    var pieChart: dc.PieChart = dc.pieChart("#dc-pie-graph");
    var volumeChart: dc.BarChart = dc.barChart("#dc-volume-chart");
    var lineChart: dc.LineChart = dc.lineChart("#dc-line-chart");
    var dataTable: dc.DataTableWidget = dc.dataTable("#dc-table-graph");
    var rowChart: dc.RowChart = dc.rowChart("#dc-row-graph");

    /********************************************************
     *                           *
     *   Step2:  Run data through crossfilter        *
     *                           *
     ********************************************************/
    var ndx: CrossFilter.CrossFilter<IYelpData> = crossfilter(yelp_data);

    /********************************************************
     *                           *
     *   Step3:  Create Dimension that we'll need      *
     *                           *
     ********************************************************/

    // for volumechart
    var cityDimension: CrossFilter.Dimension<IYelpData, string> = ndx.dimension((d: IYelpData) => d.city);
    var cityGroup: CrossFilter.Group<IYelpData, string, string> = cityDimension.group();
    var cityDimensionGroup: CrossFilter.Group<IYelpData, string, IYelpDataExtended> = cityDimension.group().reduce(
        //add
        (p: IYelpDataExtended, v:IYelpData) => {
            ++p.count;
            p.review_sum += v.review_count;
            p.star_sum += v.stars;
            p.review_avg = p.review_sum / p.count;
            p.star_avg = p.star_sum / p.count;
            return p;
        },
        //remove
        (p: IYelpDataExtended, v:IYelpData) => {
            --p.count;
            p.review_sum -= v.review_count;
            p.star_sum -= v.stars;
            p.review_avg = p.review_sum / p.count;
            p.star_avg = p.star_sum / p.count;
            return p;
        },
        //init
        () => {
            return {count: 0, review_sum: 0, star_sum: 0, review_avg: 0, star_avg: 0};
        }
    );

    // for pieChart
    var startValue: CrossFilter.Dimension<IYelpData, number> = ndx.dimension((d: IYelpData) => d.stars * 1.0);
    var startValueGroup: CrossFilter.Group<IYelpData, number, number> = startValue.group();

    // For datatable
    var businessDimension: CrossFilter.Dimension<IYelpData, string> = ndx.dimension((d: IYelpData) => d.business_id);
    /********************************************************
     *                           *
     *   Step4: Create the Visualisations          *
     *                           *
     ********************************************************/

    bubbleChart
        .width(650)
        .height(300)
        .dimension(cityDimension)
        .group(cityDimensionGroup)
        .transitionDuration(1500)
        .colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"])
        .colorDomain([-12000, 12000])
        .x(d3.scale.linear().domain([0, 5.5]))
        .y(d3.scale.linear().domain([0, 5.5]))
        .r(d3.scale.linear().domain([0, 2500]))
        .keyAccessor((p: any) => p.value.star_avg)
        .valueAccessor((p: any) => p.value.review_avg)
        .radiusValueAccessor((p: any) => p.value.count)
        .transitionDuration(1500)
        .elasticY(true)
        .yAxisPadding(1)
        .xAxisPadding(1)
        .label((p: any) => p.key)
        .renderLabel(true)
        .renderlet((chart: dc.BubbleChart) => rowChart.filter(chart.filter()))
        .on("postRedraw", (chart: dc.BubbleChart) => dc.events.trigger(() => rowChart.filter(chart.filter())));

    pieChart
        .width(200)
        .height(200)
        .transitionDuration(1500)
        .dimension(startValue)
        .group(startValueGroup)
        .radius(90)
        .minAngleForLabel(0)
        .label((d: any) => d.data.key)
        .on("filtered", (chart: dc.PieChart) =>
//.........這裏部分代碼省略.........