使用帶有 JSON 數據的 techanJS D3 示例

Question

我想在我的應用程序中使用幾個 techanJS 示例，但正在努力使用我自己的數據。

這是我要使用的收盤圖表的示例代碼。

我有戲！ 傳入 List[CloseList] 數組的框架應用程序，然后使用以下方法將其轉換為 JSON 對象：

var closesJSON = @{Html(new Gson().toJson(closes))};

然后我假設我將能夠用 d3.json() 替換 d3.csv() 但找不到一個有效的例子，我的黑客到目前為止還沒有讓我在任何地方。

d3.csv("data.csv", function(error, data) {
    var accessor = close.accessor();

    data = data.slice(0, 200).map(function(d) {
        return {
            date: parseDate(d.Date),
            open: +d.Open,
            high: +d.High,
            low: +d.Low,
            close: +d.Close,
            volume: +d.Volume
        };
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

    x.domain(data.map(accessor.d));
    y.domain(techan.scale.plot.ohlc(data, accessor).domain());

    svg.append("g")
            .datum(data)
            .attr("class", "close")
            .call(close);

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");
});

這里的工作代碼，這呈現：

d3.json("/api/closedata/@equity.getId", function(error, data) {
    var accessor = close.accessor();

    data = data.map(function(d,i) {
        console.log(d.high);
        return {
            date : parseDate(d.closeDate),
            open : d.openPrice,
            high : d.high,
            low : d.low,
            close : d.closePrice,
            volume : d.volume
        }
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });


    x.domain(data.map(accessor.d));
    y.domain(techan.scale.plot.ohlc(data, accessor).domain());

    svg.append("g")
            .datum(data)
            .attr("class", "close")
            .call(close);

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");
});

Answer 1

我可以將數據存儲在 json 文件中，您只需使用該功能

d3.json("file.json",callback);

之后，您必須更改代碼中的屬性名稱（他的 csv 上的屬性可能與您在 json 中的屬性不同）

回調，通常是一個函數，但我認為您在代碼中沒有任何其他更改。

驗證您的 json（使用http://jsonprettyprint.com/ 之類的網站），使用默認 csv 在您的計算機上測試代碼（ http://bl.ocks.org/andredumas/af8674d57980790137a0 ）以查看它是否有效。 它的工作，改變使用json（就像我告訴你的那樣）。