Ändern der Größe der Blase in der Scatter-Plot für c3.js

Habe ich eine scatter-plot-charge, wo ich will zu ändern, die Größe der Punkte, dass Sie Aussehen wie bubble. Kann jemand mir zeigen, wie das ändern der Größe der Blase?

Hier ist mein code:

var chart = c3.generate({
    data: {
        xs: {
            IBM: 'ibm_x',
            Microsoft: 'microsoft_x',
        },

        columns: [
            ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
            ["microsoft_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
            ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["Microsoft", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
        ],
        type: 'scatter'
    },
             color: {
        pattern: ['#4C7A9F', '#E25459']
    },

});

setTimeout(function () {
    chart.load({
        columns: [
            ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ["IBM", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 2000);

            setTimeout(function () {
    chart.load({
        columns: [
            ["Microsoft", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 10.1, 10.2, 10.2, 10.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 3000);

Dies ist mein FIDDLE. Ich bin im Grunde versucht, um mein Diagramm zu schauen, wie diese

Ein bubble-chart benötigt drei Werte für jedes element: x, y, und Wert. Die Dritte ist die, die man verwendet, um die relative Größe (radius, Fläche...). Ich sehe nicht, dass eine Art von Struktur in Ihre Daten.

InformationsquelleAutor user1010101 | 2015-06-08

17

Mit c3, wenn Sie nur wollen, um erhöhen Sie die Größe in Punkt gleichmäßig, nur fügen Sie eine Eigenschaft für Punkte, und geben Sie den radius
```
point: {
    r: 15
},
```
Fiddle - http://jsfiddle.net/3jfe75r8/

Wenn Sie möchten, stellen Sie den Punkt Größe , hängt von den Abmessungen können Sie ersetzen die hardcoded 15, die durch eine Funktion. Zum Beispiel
```
point: {
    r: function(d) { 
       return d.value * 5;
    }
},
```
Bemerken, dass ich, multipliziert mit einem Skalierungsfaktor von 5, so dass die Punkte groß genug wäre. Wenn Sie Ihre Daten-Werte sind groß genug, braucht man eigentlich nicht dieser Skalierungsfaktor.

Wenn Sie möchten, stellen Sie den Punkt Größe abhängig von den Dimensionen tun Sie dies
```
point: {
    r: function(d) { 
       return (d.x + d.value) * 5;
    }
},
```
Oder was auch immer Ausdruck, der Ihre Fantasie anregt.

Wenn Sie wollen Skala die Größe von einer der dimension, definieren Sie Ihre eigenen scaling-Funktion und verwenden. Zum Beispiel
```
var rs = d3.scale.linear()
          .domain([0.01, 5])
          .range([5, 50]);
```
dann
```
point: {
    r: function(d) {
        return rs(d.value)
    }
},
```
Würde die Skala der radius Linear von 5 auf 50 für die Werte von 0.01 bis 5.

Könnte man auch ersetzen 0,01 und 5 von der aktuellen min-und max-Werte aus dem dataset (Verwendung d3.min(< < array > >) und d3.max(< < array > >)). Wenn Sie die Daten multidimensional ist, müssen Sie glätten Sie es in ein array.

Wenn Sie Ihre Daten dynamisch ändert, entweder umdefinieren-scaling-Funktion, oder es hängt von den Daten ab (vs. die Werte aus den Daten berechnet)
- von Ihnen positiv bewertet werden, Das ist großartig, aber jetzt wenn ich will nur einige von Ihnen werden große und einige kleinere? Welche alternativen können Sie vorschlagen?
- Sie können ersetzen 15, die durch eine Funktion zu - zum Beispiel - r: function(d) { return Math.random() * 30;} geben Sie Blasen von unterschiedlichem radius. Ihre Daten werden nicht Dritte dimension btw, so einen Grund, Sie wirklich wollen, dies zu tun?
- Hier ist ein weiteres Beispiel, das ändert den radius basierend auf dem dataset github.com/masayuki0812/c3/blob/master/htdocs/samples/...
- d....x ist der x-Wert des Punktes und d....Wert der y-Wert, d....index ist der index (Sie können es verwenden, um beziehen sich auf eine z-dimension). Für z.B. die Funktion(d) { return d.x * d....Wert * 5; } macht der radius eine Funktion der x-und der y-Wert.
- Gut, was ich tun wollte, war, wie zum Beispiel sagen Sie "10" ist der größte Wert in meinen Daten, die ich will, dass es die größte Blase die Größe und der rest der Blase Größe sollte in Bezug auf dieses. Ich bin versucht, das zu tun. so würde ich den pass in der Funktion zu tun?
- So müssten Sie, um zu bestimmen, die kleinsten (0?) & größte (10?) Wert. Verwenden Sie dann die Funktion berechnen, was die Größe für jeden Punkt wäre. So etwas wie: return (d.value - smallest) / (largest - smallest) * x; ... wobei x bestimmt, wie groß Sie bekommen können.
- Sie haben in 2 Dimensionen. Sie haben die 2 größten Werte pro Datensatz - eine für jede Achse. Für die Logik, die Logik wäre ähnlich zu dem, was Sean sagte. Prost!
- Hey ich habe gerade gebucht eine neue Frage für c3.js und ich denke, Sie können in der Lage sein, mir zu helfen stackoverflow.com/questions/31035173/...
- Ich glaube, jemand ist schon auf, ja? prost!
- Ich habe diese Frage gestellt und Sie vielleicht in der Lage, mir zu helfen mit ihm. stackoverflow.com/questions/37031238/...
- Wie ich sehe hast du da eine Antwort. Prost!
- ja, habe ich, allerdings gibt es ein Problem mit der Beantwortung der Bögen zu tun erweitern, aber sobald ich den Mauszeiger über das Diagramm, schrumpfen Sie wieder. gibt es Möglichkeit dieses Problem zu beheben?
- ich habe nicht angenommen, dass die Antwort noch, da es einige Fehler ich würde mich sehr freuen, wenn Sie post einen fix zu haben, damit ich abstimmen kann man auch
- nur überschreiben chart.internal.unexpandArc nicht alles tun für die ids A und B wie jsfiddle.net/uamd1404
- href="https://jsfiddle.net/svo2hp2h/" >jsfiddle.net/svo2hp2h ich habe versucht, Ihre Lösung nun die Bögen sind nicht weitet sich in alle
- Ich habe gerade diese Frage gestellt, seprate ich denke, Sie verdienen Anerkennung für Ihre Arbeit, damit Sie hier posten kann stackoverflow.com/questions/37054899/...
InformationsquelleAutor potatopeelings
2

d3 Größe für Sie arbeiten würde. Zum Beispiel:
```
var circle = svg.selectAll("circle")
    .data([32, 57, 293], String);

circle.enter().append("svg:circle")
    .attr("cy", 90)
    .attr("cx", String)
    .attr("r", Math.sqrt);
```
Dies kann auch eine gute Referenz: Link oder besuchen Sie diese Gist. Die Datei index_previous.html ein Beispiel ähnlich zu dem, was Sie suchen, laden Sie einfach das Beispiel, die Daten und entfernen Sie die "//" aus dieser Zeile:
```
//bubbles.addMeasureAxis("z", "Delay_per_Flight (minutes)");
```
- Ich werde einen Blick auf Ihren link ist es möglich, vielleicht ist mein edit Fiddle und zeigen mir vielen Dank für die tolle Referenz, wieder einmal.
InformationsquelleAutor Rafa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.