Question

当我尝试通过使用WebAPI服务来构建图表时，我收到以下异常。 WebAPI返回需要用于构建图表的Json内容。但是如果我传递放在.json文件中的相同Json内容，那么它工作正常并且图表正确呈现。看起来json内容很好，但我使用json的方式可能就是问题。

当角度组件使用服务时，虽然服务作为字符串/ json内容返回，但它被视为JS对象。请参考快照。由于它是一个JS对象，D3组件无法解析此内容并抛出异常，如下所示

例外

SyntaxError: Unexpected token o in JSON at position 1
    at Object.parse (native)
    at BubbleChart.DrawBubbleChart (http://localhost:49928/app/Charts/BubbleChart.js:34:31)
    at SafeSubscriber.GetExtractorQueuesLatest._CacheDataService.GetExtractorQueuesLatest.subscribe [as _next] (http://localhost:49928/app/Charts/BubbleChart.js:28:18)
    at SafeSubscriber.__tryOrUnsub (http://localhost:49928/lib/rxjs/Subscriber.js:225:16)
    at SafeSubscriber.next (http://localhost:49928/lib/rxjs/Subscriber.js:174:22)
    at Subscriber._next (http://localhost:49928/lib/rxjs/Subscriber.js:124:26)
    at Subscriber.next (http://localhost:49928/lib/rxjs/Subscriber.js:88:18)
    at CatchSubscriber.Subscriber._next (http://localhost:49928/lib/rxjs/Subscriber.js:124:26)
    at CatchSubscriber.Subscriber.next (http://localhost:49928/lib/rxjs/Subscriber.js:88:18)
    at MapSubscriber._next (http://localhost:49928/lib/rxjs/operator/map.js:82:26)

使用WebAPI服务的服务组件如下

  public GetExtractorQueuesLatest = () : Observable<Response> => {
        console.log("Inside method getextractorqueueslatest");
        console.log("API Url : " + this.BLUESKYDATACACHEAPI_GETEXTRACTORQUEUESLATEST);
        return this._http.get(this.BLUESKYDATACACHEAPI_GETEXTRACTORQUEUESLATEST, { headers: ContentHeaders })
            .map((Response) => Response.json())
            .catch(this.HandleError);
    }

标题组件

export const ContentHeaders = new Headers();
ContentHeaders.append('Accept', 'application/json');
ContentHeaders.append('Content-Type', 'application/json');

构建图表的组件如下

＆＃13;

import { Component } from '@angular/core';
import { CacheDataService } from '../Service/CacheDataService';
import { HTTP_PROVIDERS, Http } from '@angular/http';

declare var d3: any;

@Component({
    selector: 'bubble-chart',
    styles: [`
    `],
    providers: [CacheDataService, HTTP_PROVIDERS],
    template: ``
})
export class BubbleChart {
    public resultData: any;
    chartData: JSON;
    margin = 20;
    diameter = 550;

    constructor(private _CacheDataService: CacheDataService) {
        console.log("In constructor of BubbleChartComponent");
        this.GetExtractorQueuesLatest();
        console.log("Invoked GetExtractorQueuesLatest and returned with Cache data");
    }
     
    GetExtractorQueuesLatest() {
        console.log("Inside GetExtractorQueuesLatest method in BubbleChartComponent");

        this._CacheDataService.GetExtractorQueuesLatest()
            //.map((res) => res.json())
            .subscribe(
            (res) => {
                this.resultData = res;
              
                this.DrawBubbleChart();
            },
            (error) => console.log(error),
            () => console.log('Error in GetExtractorQueuesLatest in BubbleChartComponent')
            );
    }

    private DrawBubbleChart(): void {
        console.log("Inside DrawBubbleChart in BubbleChartComponent");
        console.log(this.resultData);
     
        //.range(["hsl(152,100%,100%)", "hsl(228,30%,40%)"]) makes the background to white

        var color = d3.scale.linear()
            .domain([-1, 2])
            .range(["hsl(552,100%,100%)", "hsl(28,5%,10%)"])
            .interpolate(d3.interpolateHcl);

        var pack = d3.layout.pack()
            .padding(2)
            .size([this.diameter - this.margin, this.diameter - this.margin])
            .value(function (d) { return d.size; })

        var svg = d3.select("body").append("svg")
            .attr("width", this.diameter)
            .attr("height", this.diameter)
            .append("g")
            .attr("transform", "translate(" + this.diameter / 2 + "," + this.diameter / 2 + ")");

        //var chart = d3.json("HTML/Charts/flare.json", (error, root) => {
        var chart = d3.json(this.resultData, (error, root) => {
            
            if (error) throw error;

            var focus = root,
                nodes = pack.nodes(root),
                view;

            var circle = svg.selectAll("circle")
                .data(nodes)
                .enter().append("circle")
                .attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
                .style("fill", (d) => { return d.children ? color(d.depth) : null; })
                .on("click", (d) => { if (focus !== d) zoom.call(this, d), d3.event.stopPropagation(); });

            var text = svg.selectAll("text")
                .data(nodes)
                .enter().append("text")
                .attr("class", "label")
                .style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; })
                .style("display", function (d) { return d.parent === root ? "inline" : "none"; })
                .text(function (d) { return d.name; });

            var node = svg.selectAll("circle,text");

            d3.select("body")
                .style("background", color(-1))
                .on("click", () => { zoom.call(this, root); });

            zoomTo.call(this, [root.x, root.y, root.r * 2 + this.margin]);

            function zoom(d) {
                var focus0 = focus; focus = d;

                var transition = d3.transition()
                    .duration(d3.event.altKey ? 7500 : 750)
                    .tween("zoom", (d) => {
                        var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + this.margin]);
                        return (t) => { zoomTo.call(this, i(t)); };
                    });

                transition.selectAll("text")
                    .filter(function (d) { return d.parent === focus || this.style.display === "inline"; })
                    .style("fill-opacity", function (d) { return d.parent === focus ? 1 : 0; })
                    .each("start", function (d) { if (d.parent === focus) this.style.display = "inline"; })
                    .each("end", function (d) { if (d.parent !== focus) this.style.display = "none"; });
            }

            function zoomTo(v) {
                var k = this.diameter / v[2]; view = v;
                node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
                circle.attr("r", function (d) { return d.r * k; });
            }//end zoomTo

        });//end chart

    }//end DrawBubbleChart

}

＆＃13;

我尝试记录服务呈现的Json内容，内容的快照如下

Answer 1

我找到了解决方案，实际上问题是D3组件需要api / services本身的URL。但是在我的代码中，我试图传递d3不期望的JSON / JS对象，因此抛出了这个异常。现在我更正了我的代码以传递API网址，它工作正常。

  var chart = d3.json("http://APIserviceurl", (error, root) => {

在位置1的JSON中的意外标记o - 在angular2图表组件中

1 个答案: