d3垂直条形图

Question

How can I draw chart like this?
I have data (for example):

{
  "USA": {
    "value": 10,
    "companies": [ "Apple", "Google" ],
    "color": "red"
  },
  "Germany": {
    "value": 3,
    "companies": [ "SAP" ],
    "color": "green"
  }
}

"value" is for the left side.
"companies" is for the right side.
"value" != "compnaies" length.

I can't figure out what kind of graph I must use.
I'll try hierarchy , but it must have only one root.

Answer 1

i made a small poc but i'm not sure what you want so i can't really got much further please take a look at this : https://jsfiddle.net/z9bcfdvk/ i used the dataser you provided and added one entry: Let me know if you want more detail.

var data = [
        {
            country: "USA",
            "value": 10,
            companies: ["Apple", "Google"],
            "color": "#123445"
        },
        {
            country: "Germany",
            "value":
                3,
            companies:
                ["SAP"],
            "color":
                "#987456"
        }, {
            country: "France",
            "value":
                1,
            companies:
                ["RENAULT"],
            "color":
                "#8b9838"
        }
    ]