Question

我附上了我希望看起来像这样的图像。我有一个json文件，其中每个散点图都代表一个键，值是一个带有数值和时间戳的关联数组数组。我怎样才能让d3显示这个？谢谢， Lyyphe223

[！[画面中的堆积散点图将在d3中显示] [1]] [1]

[链接到图像] [1]

Here is my code:


<script>
var parseTime = d3.utcParse("%Y-%m-%d %H:%M:%S+00");

var margin = {top: 30, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleUtc()
    .domain([parseTime("2016-08-31 19:32:00+00"), parseTime("2016-09-03 19:32:00+00")])
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

/*
var yaxis = svg.append("g")
          .attr("class", "axis axis--y");

yaxis.call(d3.axisLeft(y));
var xaxis = svg.append("g")
                 .attr("class", "axis axis--x")
                 .attr("transform", "translate(0," + height + ")");
xaxis.call(d3.axisBottom(x));

*/

function update(d,measureType) {
    var timestamps = R.map(data => parseTime(data.ts),d[measureType]).sort();
    var upperbound = timestamps[0];
    var lowerbound = R.last(timestamps);
    var dataToUse = d[measureType];
     y.domain(d3.extent(dataToUse,d => d.value));
     x.domain([d3.timeDay.offset(lowerbound,-1),d3.timeDay.offset(upperbound,1)]);

     var patsvg = svg.selectAll("path")
            .data(d[measureType]);
    patsvg.exit().remove();     

     patsvg.enter().append("path")  
            .merge(patsvg)
            .attr("transform", function(d) { return "translate(" + x(parseTime(d.ts)) + "," + y(d.value) + ")"; })
            .attr("d", d3.symbol().type(d3.symbolCircle));



     xaxis.call(d3.axisBottom(x));
    yaxis.call(d3.axisLeft(y));

}

function update2(d) {
    var patsvgs = d3.selectAll('svg')
            .data(R.compose(R.map(k => R.apply(R.assoc, k)({})),
                R.filter(d => d[0] == "pres"),R.toPairs)(d));


    patsvgs.enter().append("svg")
            .merge(patsvgs)
            .attr("class","measuresvg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
    patsvgs.exit().remove();

    var measuredots = patsvgs.append("g")
                .attr("class","measuredots");
    y.domain([20,50]);      
    var yaxis = patsvgs.append("g")
                .attr("class", "axis axis--y");
    yaxis.call(d3.axisLeft(y));

    var xaxis = patsvgs.append("g")
                 .attr("class", "axis axis--x")
                 .attr("transform", "translate(0," + height + ")");
    xaxis.call(d3.axisBottom(x));

    measuredots.selectAll("path")
        .data(d => R.values(d)[0])
        .enter()
        .append("path")
        .attr("transform", function(d) { return "translate(" + x(parseTime(d.ts)) + "," + y(d.value) + ")"; })
                .attr("d", d3.symbol().type(d3.symbolCircle));
    ;debugger
    patsvgs.selectAll('.axis--y')
/*
var yaxis = svg.append("g")

yaxis.call(d3.axisLeft(y));
var xaxis = svg.append("g")
                 .attr("class", "axis axis--x")
xaxis.call(d3.axisBottom(x));

*/
    /*
    patsvg.enter().append("path")   
            .merge(patsvg)
            .attr("transform", function(d) { return "translate(" + x(parseTime(d.ts)) + "," + y(d.value) + ")"; })
            .attr("d", d3.symbol().type(d3.symbolCircle));
    */

}

 d3.json("resources/roblongson-sample-1M.json", function(e,d) {
 // debugger;
 if (e) throw e;

d3.select('#thingSearch')
     .on("input",function () {
        update2(R.filter(data => data.thing == this.value,d)[0]);
    });

});
</script>


  [1]: https://i.stack.imgur.com/N93Ra.png

在json文件中堆叠d3中的散点图

0 个答案: